Flutter基础widgets教程-RaisedButton篇

简介: Flutter基础widgets教程-RaisedButton篇

1 RaisedButton

RaisedButton组件主要用于文本布局。

2 构造函数

RaisedButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
})

复制

3 常用属性

3.1 onPressed

必填参数,按下按钮时触发的回调,接收一个方法,传null表示按钮禁用,会显示禁用相关样式

3.2 textColor:文本颜色

textColor: Colors.white,

复制

3.3 color:按钮颜色

color: Colors.red,

复制

3.4 splashColor:点击按钮时水波纹的颜色

splashColor: Colors.black,

复制

3.5 highlightColor:高亮颜色,点击(长按)按钮后的颜色

highlightColor: Colors.green,

复制

3.6 padding:内边距,其接收值的类型是EdgeInsetsGeometry类型的

3.6.1 一次性设置上下左右的间距

padding: EdgeInsets.all(20),

复制

3.6.2 单独设置

3.6.2.1 上内边距  

padding: EdgeInsets.only(top: 30),

复制

3.6.2.2 下内边距  

padding: EdgeInsets.only(bottom: 30),

复制

3.6.2.3 左内边距  

padding: EdgeInsets.only(left: 30),

复制

3.6.2.4 右内边距  

padding: EdgeInsets.only(right: 30),

复制

3.6.3 一次性设置上下左右的间距 左上右下顺序设置

padding: EdgeInsets.fromLTRB(0,30,20,40),

复制

3.7 shape:设置按钮的形状

3.7.1 borderRadius:设置圆角

shape: BeveledRectangleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
    borderRadius: BorderRadius.all(Radius.circular(10))
),

复制

3.7.2 BeveledRectangleBorder:带斜角的长方形边框

shape: BeveledRectangleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
    borderRadius: BorderRadius.all(Radius.circular(10))
),

复制

3.7.3 CircleBorder:圆形边框

shape: CircleBorder(
    side: BorderSide(
        color: Colors.white,
    ),
),

复制

3.7.4 RoundedRectangleBorder:圆角矩形

shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
),

复制

3.7.5 StadiumBorder:两端是半圆的边框

shape: StadiumBorder(),

复制


相关文章
|
22天前
|
索引
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/GridView
27 0
|
22天前
|
Android开发 iOS开发
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ScrollView
50 0
|
22天前
|
开发者
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
Flutter.源码分析 flutter/packages/flutter/lib/src/widgets/scroll_view.dart/BoxScrollView
25 0
|
22天前
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
Flutter.源码分析.flutter/packages/flutter/lib/src/widgets/scroll_view.dart/ListView
25 0
|
5月前
|
Dart 前端开发 开发工具
谷歌移动UI框架Flutter教程之Widget
谷歌移动UI框架Flutter教程之Widget
|
Web App开发 JavaScript 应用服务中间件
Flutter Web网站搭建教程
曾几何时,你有没有一个搭个人网站的冲动,我这个想法在我第一次开始写博客就有了,可就是没有搭起来,直到我看到flutter有了web支持,我就在想,是时候了,必须且一定要做,于是乎我就搭建了现在的网站ibaozi.cn
394 0
Flutter Web网站搭建教程
|
XML Java Android开发
Flutter(四)——基础组件
Flutter(四)——基础组件
310 0
Flutter(四)——基础组件
|
存储 索引
Flutter从0到1实现高性能、多功能的富文本编辑器(基础实战篇)
在上一章中,我们分析了一个富文本编辑器需要有哪些模块组成。在本文中,让我们从零开始,去实现自定义的富文本编辑器。
|
Android开发 开发者
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
在上一节我们已经讲了Flutter路由管理与Navigator基础使用,有兴趣或者对这一块还不太了解的同学可以去看看。 但是仅仅这样时不够的 在实际项目中这些怎么会够呢???现在让我们来看看这些骚操作…
Flutter教程 — 路由管理与Navigator进阶使用(老油条看了都说好!!!)
|
前端开发 程序员
Flutter路由管理与Navigator基础使用
Flutter的路由管理与Navigator基础使用
Flutter路由管理与Navigator基础使用