精华内容
参与话题
问答
  • Flutter】二、按钮详解一、RaisedButton1.1 RaisedButton构造器1.2 RaisedButton属性说明1.2.1 Button.shape二、FlatButton2.1 FlatButton构造器2.2 FlatButton属性说明三、OutlineButton3.1 FlatButton构造器3.2 ...

    Flutter中常用按钮有:RaisedButton(凸起按钮)、FlatButton(扁平化按钮)、IconButton(图标按钮)、OutlineButton(边框annual)、FloatingActionButton(浮动按钮)、ButtonBar(按钮组)、DropdownButton(下拉按钮)、PopupMenuButton(弹出菜单按钮)。

    一、RaisedButton

    1.1 RaisedButton构造器

    const RaisedButton({
        Key key,
        @required VoidCallback onPressed,
        ValueChanged<bool> onHighlightChanged,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color disabledColor,
        Color focusColor,
        Color hoverColor,
        Color highlightColor,
        Color splashColor,
        Brightness colorBrightness,
        double elevation,
        double focusElevation,
        double hoverElevation,
        double highlightElevation,
        double disabledElevation,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior,
        FocusNode focusNode,
        MaterialTapTargetSize materialTapTargetSize,
        Duration animationDuration,
        Widget child,
      }) : assert(elevation == null || elevation >= 0.0),
           assert(focusElevation == null || focusElevation >= 0.0),
           assert(hoverElevation == null || hoverElevation >= 0.0),
           assert(highlightElevation == null || highlightElevation >= 0.0),
           assert(disabledElevation == null || disabledElevation >= 0.0),
           super(
             key: key,
             onPressed: onPressed,
             onHighlightChanged: onHighlightChanged,
             textTheme: textTheme,
             textColor: textColor,
             disabledTextColor: disabledTextColor,
             color: color,
             disabledColor: disabledColor,
             focusColor: focusColor,
             hoverColor: hoverColor,
             highlightColor: highlightColor,
             splashColor: splashColor,
             colorBrightness: colorBrightness,
             elevation: elevation,
             focusElevation: focusElevation,
             hoverElevation: hoverElevation,
             highlightElevation: highlightElevation,
             disabledElevation: disabledElevation,
             padding: padding,
             shape: shape,
             clipBehavior: clipBehavior,
             focusNode: focusNode,
             materialTapTargetSize: materialTapTargetSize,
             animationDuration: animationDuration,
             child: child,
           );
    

    1.2 RaisedButton属性说明

    属性 说明
    VoidCallback onPressed 点击事件
    ValueChanged onHighlightChanged 高亮变化监听
    ButtonTextTheme textTheme 控制文本主题
    ButtonTextTheme.normal: 文本颜色为黑色或白色,取决于ThemeData.brightness,可在MaterialApp下设置theme:ThemeData(brightness: Brightness.light);黑暗模式或高亮模式
    ButtonTextTheme.accent: 文本颜色取决于ThemeData.accentColor
    ButtonTextTheme.primary:文本颜色基于ThemeData.primaryColor*设置ThemeData.primaryColor按钮文本一直为黑色
    Color textColor 文本颜色
    Color disabledTextColor 按钮不可点击时的文本颜色,不设置onPressed属性可触发该属性
    Color color 按钮背景色
    Color disabledColor 按钮不可点击时的背景色
    Color focusColor
    Color hoverColor
    Color highlightColor 高亮颜色,按钮按下时会显示为该颜色
    Color splashColor 水波纹颜色
    Brightness colorBrightness 按钮的主题亮度,当设置了textColor、color颜色,此值无效!未设置textColor、color颜色时可使用Brightness.dark与Brightness.light
    double elevation 阴影扩散范围
    double focusElevation
    double hoverElevation
    double highlightElevation 高亮阴影扩散范围,按钮按下时显示
    double disabledElevation 按钮不可点击时阴影扩散范围
    EdgeInsetsGeometry padding 内边距
    例:padding: EdgeInsets(15.0)
    ShapeBorder shape 设置按钮边框或形状
    参考1.2.1 Button.shape
    Clip clipBehavior 剪裁内容
    Clip.hardEdge
    Clip.antiAlias
    Clip.antiAliasWithSaveLayer
    Clip.none
    FocusNode focusNode
    MaterialTapTargetSize materialTapTargetSize
    Duration animationDuration 水波纹动画持续时间
    例如:Duration(milliseconds: 300) //持续300ms
    Widget child 定义子节点

    1.2.1 Button.shape

    1.只设置边框

    shape: Border.all(
    	color: Colors.blue,
    	width: 2.0,
    	style: BorderStyle.solid
    )
    

    2.设置形状及边框

    1.BeveledRectangleBorder顶端斜角
    shape: BeveledRectangleBorder(
    	side: BorderSide(
    		color: Colors.blue,
    		width: 1.0,
    		style: BorderStyle.solid
    	),
    	borderRadius: BorderRadius.all(
    		Radius.circular(12.0)
    	)
    )
    2.CircleBorder圆形
    shape: CircleBorder(
    	side: BorderSide(
    		color: Colors.blue,
    		width: 2.0,
    		style: BorderStyle.solid
    	)
    )
    3.RoundedRectangleBorder圆角
    shape: RoundedRectangleBorder(
    	borderRadius: BorderRadius.circular(10.0),
    	side: BorderSide(
    		color: Colors.blue,
    		width: 1.0,
    		style: BorderStyle.solid
    	)
    )
    4.StadiumBorder半圆角(RoundedRectangleBorder若将borderRadius设置大一点也可实现这种效果)
    shape: StadiumBorder(
    	side: BorderSide(
    		color: Colors.blue,
    		width: 1.0,
    		style: BorderStyle.solid
    	)
    )
    

    以上四种效果分别为:


    BeveledRectangleBorder

    BeveledRectangleBorder顶端斜角

    CircleBorder

    CircleBorder圆形

    RoundedRectangleBorder

    RoundedRectangleBorder圆角

    StadiumBorder

    StadiumBorder半圆角

    二、FlatButton

    2.1 FlatButton构造器

    const FlatButton({
        Key key,
        @required VoidCallback onPressed,
        ValueChanged<bool> onHighlightChanged,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color disabledColor,
        Color focusColor,
        Color hoverColor,
        Color highlightColor,
        Color splashColor,
        Brightness colorBrightness,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior,
        FocusNode focusNode,
        MaterialTapTargetSize materialTapTargetSize,
        @required Widget child,
      }) : super(
             key: key,
             onPressed: onPressed,
             onHighlightChanged: onHighlightChanged,
             textTheme: textTheme,
             textColor: textColor,
             disabledTextColor: disabledTextColor,
             color: color,
             disabledColor: disabledColor,
             focusColor: focusColor,
             hoverColor: hoverColor,
             highlightColor: highlightColor,
             splashColor: splashColor,
             colorBrightness: colorBrightness,
             padding: padding,
             shape: shape,
             clipBehavior: clipBehavior,
             focusNode: focusNode,
             materialTapTargetSize: materialTapTargetSize,
             child: child,
          );
    

    2.2 FlatButton属性说明

    参考RaisedButton属性说明

    三、OutlineButton

    3.1 OutlineButton构造器

    const OutlineButton({
        Key key,
        @required VoidCallback onPressed,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color focusColor,
        Color hoverColor,
        Color highlightColor,
        Color splashColor,
        double highlightElevation,
        this.borderSide,
        this.disabledBorderColor,
        this.highlightedBorderColor,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior,
        FocusNode focusNode,
        Widget child,
      }) : assert(highlightElevation == null || highlightElevation >= 0.0),
           super(
             key: key,
             onPressed: onPressed,
             textTheme: textTheme,
             textColor: textColor,
             disabledTextColor: disabledTextColor,
             color: color,
             focusColor: focusColor,
             hoverColor: hoverColor,
             highlightColor: highlightColor,
             splashColor: splashColor,
             highlightElevation: highlightElevation,
             padding: padding,
             shape: shape,
             clipBehavior: clipBehavior,
             focusNode: focusNode,
             child: child,
           );
    

    3.2 OutlineButton属性说明

    参考RaisedButton属性说明

    四、IconButton

    4.1 IconButton构造器

    const IconButton({
        Key key,
        this.iconSize = 24.0,
        this.padding = const EdgeInsets.all(8.0),
        this.alignment = Alignment.center,
        @required this.icon,
        this.color,
        this.focusColor,
        this.hoverColor,
        this.highlightColor,
        this.splashColor,
        this.disabledColor,
        @required this.onPressed,
        this.focusNode,
        this.tooltip,
      }) : assert(iconSize != null),
           assert(padding != null),
           assert(alignment != null),
           assert(icon != null),
           super(key: key);
    

    4.2 IconButton属性说明

    属性 说明
    Widget icon 指定图标
    double iconSize 指定图标大小
    AlignmentGeometry alignment 图标对齐方式
    Alignment.center: 居中对齐,默认
    Alignment.topLeft
    Alignment.topCenter
    Alignment.topRight
    Alignment.centerLeft
    Alignment.centerRight
    Alignment.bottomLeft
    Alignment.bottomCenter
    Alignment.bottomRight
    或使用Alignment(double x, double y):以中心为原点Alignment(-1.0, 1.0)对应Alignment.topLeft
    String tooltip 提示信息,按钮长按可显示,显示1500ms

    其余属性参考RaisedButton属性。

    五、FloatingActionButton

    5.1 FloatingActionButton构造器

    const FloatingActionButton({
        Key key,
        this.child,
        this.tooltip,
        this.foregroundColor,
        this.backgroundColor,
        this.focusColor,
        this.hoverColor,
        this.heroTag = const _DefaultHeroTag(),
        this.elevation,
        this.focusElevation,
        this.hoverElevation,
        this.highlightElevation,
        this.disabledElevation,
        @required this.onPressed,
        this.mini = false,
        this.shape,
        this.clipBehavior = Clip.none,
        this.focusNode,
        this.materialTapTargetSize,
        this.isExtended = false,
      }) : assert(elevation == null || elevation >= 0.0),
           assert(focusElevation == null || focusElevation >= 0.0),
           assert(hoverElevation == null || hoverElevation >= 0.0),
           assert(highlightElevation == null || highlightElevation >= 0.0),
           assert(disabledElevation == null || disabledElevation >= 0.0),
           assert(mini != null),
           assert(isExtended != null),
           _sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,
           super(key: key);
    

    5.2 FloatingActionButton属性说明

    属性 说明
    Color foregroundColor 图标或文本颜色
    Color backgroundColor 背景色
    bool mini mini模式

    其余属性参考RaisedButton属性。

    六、ButtonBar

    6.1 ButtonBar构造器

    const ButtonBar({
        Key key,
        this.alignment = MainAxisAlignment.end,
        this.mainAxisSize = MainAxisSize.max,
        this.children = const <Widget>[],
      }) : super(key: key);
    

    6.2 属性说明

    属性 说明
    mainAxisSize 主轴大小,默认MainAxisSize.max

    七、DropdownButton

    7.1 DropdownButton构造器

    DropdownButton({
        Key key,
        @required this.items,
        this.value,
        this.hint,
        this.disabledHint,
        @required this.onChanged,
        this.elevation = 8,
        this.style,
        this.underline,
        this.icon,
        this.iconDisabledColor,
        this.iconEnabledColor,
        this.iconSize = 24.0,
        this.isDense = false,
        this.isExpanded = false,
      }) : assert(items == null || items.isEmpty || value == null || items.where((DropdownMenuItem<T> item) => item.value == value).length == 1),
           assert(elevation != null),
           assert(iconSize != null),
           assert(isDense != null),
           assert(isExpanded != null),
           super(key: key);
    

    7.2 DropdownButton属性说明

    属性 说明
    List<DropdownMenuItem> items 下拉菜单项
    T value 被选中的value值
    Widget hint value属性为空时显示
    Widget disabledHint 当下拉按钮不能使用时显示,不指定onChange事件即可;同时指定disabledHint与hint,hint优先级高
    ValueChanged onChanged 下拉按钮改变事件
    int elevation 下拉菜单弹出式的阴影范围,可选值1, 2, 3, 4, 6, 8, 9, 12,默认为8
    TextStyle style 文本样式,该样式同时应用于按钮及下拉菜单
    Widget underline 按钮的下划线
    例:Container(height: 1.0,color: Colors.red,) 显示红色下划线
    Widget icon 指定下拉按钮icon,默认使用Icons.arrow_drop_down
    Color iconDisabledColor 下拉按钮无法点击下拉时icon的颜色
    Color iconEnabledColor 下拉按钮可使用时icon的颜色
    double iconSize icon大小,默认24.0
    bool isDense 降低按钮高度,如果为true按钮高度是item高度的一半
    bool isExpanded

    八、PopupMenuButton

    8.1 PopupMenuButton构造器

    const PopupMenuButton({
        Key key,
        @required this.itemBuilder,
        this.initialValue,
        this.onSelected,
        this.onCanceled,
        this.tooltip,
        this.elevation = 8.0,
        this.padding = const EdgeInsets.all(8.0),
        this.child,
        this.icon,
        this.offset = Offset.zero,
        this.enabled = true,
      }) : assert(itemBuilder != null),
           assert(offset != null),
           assert(enabled != null),
           assert(!(child != null && icon != null)), // fails if passed both parameters
           super(key: key);
    

    8.2 PopupMenuButton属性说明

    属性 说明
    PopupMenuItemBuilder<T> itemBuilder 弹出菜单项的生成器,该方法返回List<PopupMenuItem>
    T initialValue 设置弹出菜单默认选中项的值
    PopupMenuItemSelected<T> onSelected 弹出菜单被选择事件
    PopupMenuCanceled onCanceled 没用任何菜单被选择时触发,即点击空白处触发
    String tooltip 与IconButton一样
    double elevation 弹出菜单的阴影范围,默认为8
    EdgeInsetsGeometry padding 设置button和弹出菜单的内边距,默认为8
    Widget child 设置按钮子节点,不能与icon同时设置
    Icon icon 设置按钮图标
    Offset offset 设置下拉菜单偏移量
    bool enabled 是否可使用

    测试示例

    源码

    import 'package:flutter/material.dart';
    
    class ButtonDemo extends StatefulWidget{
      @override
      _ButtonDemoState createState() => _ButtonDemoState();
    }
    class _ButtonDemoState extends State<ButtonDemo>{
      final buttonItems = ['item1', 'item2', 'item3', 'item4'];
      final popupMenuItems = ['menu1', 'menu2', 'menu3'];
      String _selectedItem;
    
      List<DropdownMenuItem> _buildDropdownMenuItem(){
        return buttonItems.map((item){
          return DropdownMenuItem(
            value: item,
            child: Text('$item'),
          );
        }).toList();
      }
    
      @override
      void initState() {
        _selectedItem = _buildDropdownMenuItem()[0].value;
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              children: <Widget>[
                RaisedButton(
                  child: Text('RaisedButton'),
                  onPressed: () => print('click RaisedButton'),
                  onHighlightChanged: (item){
                    print(item);
                  },
                  textTheme: ButtonTextTheme.accent,
                  textColor: Colors.green,
                  disabledTextColor: Colors.black26,
                  color: Colors.orange,
                  disabledColor: Colors.grey,
                  highlightColor: Colors.greenAccent,
                  splashColor: Colors.yellow,
                  elevation: 20.0,
                  focusElevation: 30.0,
                  hoverElevation: 40.0,
                  highlightElevation: 10.0,
                  disabledElevation: 50.0,
                  padding: EdgeInsets.all(10.0),
                  shape: StadiumBorder(
                    side: BorderSide(
                      color: Colors.blue,
                      width: 1.0,
                      style: BorderStyle.solid
                    )
                  ),
                  clipBehavior: Clip.antiAlias,
                  animationDuration: Duration(
                    milliseconds: 300
                  ),
                  materialTapTargetSize: MaterialTapTargetSize.padded,
    //              shape: RoundedRectangleBorder(
    //                borderRadius: BorderRadius.circular(10.0),
    //                side: BorderSide(
    //                  color: Colors.blue,
    //                  width: 1.0,
    //                  style: BorderStyle.solid
    //                )
    //              ),
    //              shape: CircleBorder(
    //                side: BorderSide(
    //                  color: Colors.blue,
    //                  width: 2.0,
    //                  style: BorderStyle.solid
    //                )
    //              )
    //              shape: BeveledRectangleBorder(
    //                side: BorderSide(
    //                  color: Colors.blue,
    //                  width: 1.0,
    //                  style: BorderStyle.solid
    //                ),
    //                borderRadius: BorderRadius.all(
    //                  Radius.circular(12.0)
    //                )
    //              ),
    //              shape: Border.all(
    //                color: Colors.blue,
    //                width: 2.0,
    //                style: BorderStyle.none
    //              )
    //              focusColor: Colors.cyanAccent,
    //              hoverColor: Colors.green,
                ),
                FlatButton(
                  child: Text('FlatButton'),
                  color: Theme.of(context).primaryColor,
                  textColor: Colors.white,
                  splashColor: Colors.grey,
                  onPressed: () => print('click FlatButton'),
                ),
                OutlineButton(
                  child: Text('OutlineButton'),
                  onPressed: () => print('click OutlineButton'),
                ),
                IconButton(
                  alignment: Alignment.center,
                  tooltip: 'tooltip',
                  icon: Icon(Icons.add_box),
                  onPressed: () => print('click IconButton'),
                ),
                FloatingActionButton(
                  foregroundColor: Colors.red,
                  mini: true,
                  tooltip: 'tooltip',
                  child: Icon(Icons.add),
                  onPressed: () => print('click FloatingActionButton'),
                ),
                ButtonBar(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    RaisedButton(
                      child: Text('ButtonBar1'),
                      onPressed: () => print('click ButtonBar1'),
                    ),
                    RaisedButton(
                      child: Text('ButtonBar2'),
                      onPressed: () => print('click ButtonBar2'),
                    ),
                  ],
                ),
                DropdownButton(
                  value: _selectedItem,
                  hint: Text('value为空'),
                  disabledHint: Icon(Icons.home),
                  elevation: 12,
                  style: TextStyle(
                    color: Colors.greenAccent
                  ),
                  underline: Container(
                    height: 1.0,
                    color: Colors.red,
                  ),
                  icon:Icon(Icons.settings),
                  iconDisabledColor: Colors.grey,
                  iconEnabledColor: Colors.green,
                  iconSize: 20.0,
                  isDense: true,
                  items: _buildDropdownMenuItem(),
                  onChanged: (item){
                    setState(() {
                      _selectedItem = item;
                    });
                  },
                ),
                PopupMenuButton(
                  icon: Icon(Icons.share),
                  itemBuilder: (context){
                    return popupMenuItems.map((item) =>
                        PopupMenuItem(
                          child: Text('$item'),
                          value: '$item',
                        )
                    ).toList();
                  },
                  initialValue: popupMenuItems[1],
                  onSelected: (item) {
                    print(item);
                  },
                  onCanceled: (){
                    print('cancel');
                  },
                  tooltip: 'tooltip',
                  elevation: 50,
                  padding: EdgeInsets.all(20.0),
                  offset: Offset(-1.0, 10),
                  enabled: true,
                  // child: Text('下拉菜单'),
                ),
              ],
            ),
          ],
        );
      }
    }
    

    效果展示
    在这里插入图片描述

    展开全文
  • Flutter 按钮

    2019-11-25 10:31:18
    Material组件库中的按钮 Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等。它们都是直接或间接对RawMaterialButton组件的包装定制。所以他们大多数属性都和RawMaterialButton一样...

    Material组件库中的按钮

    Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等。它们都是直接或间接对RawMaterialButton组件的包装定制。所以他们大多数属性都和RawMaterialButton一样。
    所有Material 库中的按钮都有如下相同点:

    • 按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)
    • 有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁用状态不响应用户点击。

    RaisedButton

    RaisedButton 即"漂浮"按钮,它默认带有阴影和灰色背景。按下后,阴影会变大
    在这里插入图片描述

    const 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,
      })
    

    属性:

    名称 类型 说明
    onHighlightChanged ValueChanged 水波纹高亮变化回调,按下返回true,抬起返回false
    textTheme ButtonTextTheme 按钮的主题
    textColor Color 文字的颜色
    disabledTextColor Color 按钮禁用时候文字的颜色
    color Color 按钮的背景颜色
    disabledColor Color 按钮被禁用的时候显示的背景颜色
    highlightColor Color 点击或者toch控件高亮的时候显示在控件上面,水波纹下面的颜色
    splashColor Color 水波纹的颜色
    colorBrightness Brightness 按钮主题高亮
    elevation double 按钮下面的阴影
    highlightElevation double 高亮时候的阴影
    disabledElevation double 按下的时候的阴影
    padding EdgeInsetsGeometry 内边距
    shape ShapeBorder 设置形状
    clipBehavior Clip 裁剪小部件内容
    materialTapTargetSize MaterialTapTargetSize 点击目标的最小尺寸
    animationDuration Duration 动画持续的时间
    child Widget 子Widget

    FlatButton

    在这里插入图片描述
    FlatButton即扁平按钮,默认背景透明并不带阴影。按下后,会有背景色

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

    属性参见RaisedButton

    OutlineButton

    OutlineButton默认有一个边框,不带阴影且背景透明。按下后,边框颜色会变亮、同时出现背景和阴影(较弱)
    在这里插入图片描述

     const OutlineButton({
        Key key,
        @required VoidCallback onPressed,
        ButtonTextTheme textTheme,
        Color textColor,
        Color disabledTextColor,
        Color color,
        Color highlightColor,
        Color splashColor,
        double highlightElevation,
        this.borderSide,
        this.disabledBorderColor,
        this.highlightedBorderColor,
        EdgeInsetsGeometry padding,
        ShapeBorder shape,
        Clip clipBehavior = Clip.none,
        Widget child,
      })
    

    属性:(其他属性见上表)

    名称 类型 说明
    borderSide BorderSide 边框大小
    disabledBorderColor Color 禁用时边框颜色
    highlightedBorderColor Color 可用时按下边框颜色

    IconButton

    IconButton是一个可点击的Icon,不包括文字,默认没有背景,点击后会出现背景
    在这里插入图片描述
    例子:

    IconButton(
      icon: Icon(Icons.thumb_up),
      onPressed: () {},
    )
    

    带图标的按钮

    RaisedButton、FlatButton、OutlineButton都有一个icon 构造函数,通过它可以轻松创建带图标的按钮
    在这里插入图片描述
    例子:

    RaisedButton.icon(
      icon: Icon(Icons.send),
      label: Text("发送"),
      onPressed: _onPressed,
    ),
    OutlineButton.icon(
      icon: Icon(Icons.add),
      label: Text("添加"),
      onPressed: _onPressed,
    ),
    FlatButton.icon(
      icon: Icon(Icons.info),
      label: Text("详情"),
      onPressed: _onPressed,
    ),
    
    展开全文
  • Flutter 按钮组件

    2020-01-08 15:33:02
    文件结构: 内容承接:... routes.dart import 'package:flutter/material.dart'; import '../pages/tabs.dart'; import '../pages/Button.dart'; final route...

    文件结构:

    内容承接:https://blog.csdn.net/u013227399/article/details/103787189

    routes.dart

    import 'package:flutter/material.dart';
    import '../pages/tabs.dart';
    import '../pages/Button.dart';
    
    final routes = {
      '/': (context) => Tabs(),
      '/button':(context) => ButtonPage(),
    };
    
    var onGenerateRoute=(RouteSettings settings){
      //统一处理
      final String name = settings.name;
      final Function pageContentBuilder = routes[name];
      if (pageContentBuilder != null) {
        if (settings.arguments != null) {
          final Route route = MaterialPageRoute(
            builder: (context) =>
                pageContentBuilder(context, arguments: settings.arguments),
          );
          return route;
        } else {
          final Route route = MaterialPageRoute(
            builder: (context) => pageContentBuilder(context),
          );
          return route;
        }
      }
    };
    

    button.dart

    import 'package:flutter/material.dart';
    
    class ButtonPage extends StatelessWidget {
      const ButtonPage({Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('按钮演示'),
          ),
          body: ListView(
            children: <Widget>[
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('以下为RaisedButton演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('普通按钮'),
                        onPressed: () {
                          print('普通按钮');
                        },
                      ),
                      SizedBox(width: 10),
                      RaisedButton(
                        child: Text('颜色按钮'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        onPressed: () {
                          print('颜色按钮');
                        },
                      ),
                      SizedBox(width: 10),
                      RaisedButton(
                        child: Text('阴影按钮'),
                        color: Colors.blue,
                        textColor: Colors.white,
                        elevation: 10.0,
                        onPressed: () {
                          print('阴影按钮');
                        },
                      ),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('禁用按钮'), //按钮文本
                        elevation: 10.0, //阴影
                        disabledColor: Colors.black26, //禁用按钮颜色
                        disabledTextColor: Colors.black26, //禁用文本颜色
                        onPressed: null, //禁用按钮
                      ),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        child: RaisedButton(
                          child: Text('宽度按钮'),
                          onPressed: () {
                            print('宽度按钮');
                          },
                        ),
                      ),
                      SizedBox(width: 10),
                      RaisedButton.icon(
                        icon: Icon(Icons.search),
                        label: Text('图标按钮'),
                        onPressed: () {
                          print('图标按钮');
                        },
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Expanded(
                        child: Container(
                          child: RaisedButton(
                            child: Text('自适应按钮'),
                            onPressed: () {
                              print('自适应按钮');
                            },
                          ),
                        ),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      RaisedButton(
                        child: Text('圆角按钮'), //按钮文本
                        elevation: 10.0, //阴影
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10), //圆角按钮
                        ),
                        color: Colors.blue, //按钮颜色
                        textColor: Colors.white, //按钮文字颜色
                        onPressed: () {
                          print('圆角按钮');
                        },
                      ),
                      SizedBox(width: 10),
                      Container(
                        width: 100,
                        height: 100,
                        child: RaisedButton(
                          child: Text('圆形按钮'), //按钮文本
                          elevation: 10.0, //阴影
                          shape: CircleBorder(
                            side: BorderSide(color: Colors.white), //圆形按钮
                          ),
                          splashColor: Colors.red, //点击时水波纹颜色
                          color: Colors.blue, //按钮颜色
                          textColor: Colors.white, //按钮文字颜色
                          onPressed: () {
                            print('圆形按钮');
                          },
                        ),
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                  Text('以下为FlatButton演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      FlatButton(
                        child: Text('扁平化按钮'),
                        color: Colors.red,
                        textColor: Colors.white,
                        onPressed: () {
                          print('扁平化按钮');
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                  Text('以下为OutlineButton演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      OutlineButton(
                        child: Text('线框按钮'),
                        // color: Colors.red, //无效
                        // textColor: Colors.red,
                        onPressed: () {
                          print('线框按钮');
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                  Text('以下为IconButton演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      IconButton(
                        icon: Icon(Icons.search),
                        onPressed: () {
                          print('图标按钮');
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                  Text('以下为ButtonBar演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      ButtonBar(
                        children: <Widget>[
                          RaisedButton(
                            child: Text('按钮组1'),
                            onPressed: null,
                          ),
                          RaisedButton(
                            child: Text('按钮组2'),
                            onPressed: () {
                              print('按钮组2');
                            },
                          ),
                        ],
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                  Text('以下为自定义按钮演示'),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      MyButton(
                        text: '自定义按钮',
                        width: 120,
                        height: 30,
                        pressed: () {
                          print('点击自定义按钮');
                        },
                      ),
                    ],
                  ),
                  SizedBox(height: 20),
                ],
              ),
            ],
          ),
        );
      }
    }
    
    class MyButton extends StatelessWidget {
      final text;
      final pressed;
      final double width;
      final double height;
      const MyButton(
          {this.text = '', this.pressed = null, this.width = 80, this.height = 30});
    
      @override
      Widget build(BuildContext context) {
        return Container(
          width: this.width,
          height: this.height,
          child: RaisedButton(
            child: Text(this.text),
            onPressed: this.pressed,
          ),
        );
      }
    }
    

    tabs.dart

    import 'package:flutter/material.dart';
    import 'tabs/home.dart';
    import 'tabs/category.dart';
    import 'tabs/user.dart';
    
    class Tabs extends StatefulWidget {
      final index;
      Tabs({Key key, this.index = 0}) : super(key: key);
      @override
      _TabsState createState() => _TabsState(this.index);
    }
    
    class _TabsState extends State<Tabs> {
      int _currentIndex;
      _TabsState(index) {
        this._currentIndex = index;
      }
    
      List _pageList = [
        HomePage(),
        CategoryPage(),
        UserPage(),
      ];
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('按钮组件'),
          ),
          floatingActionButton: Container(
            width: 80,
            height: 80,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(bottom: 20),
            //画圆边
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(40),
              color: Colors.white,
            ),
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('浮动按钮');
                //触发分类按钮
                setState(() {
                  this._currentIndex = 1;
                });
              },
              backgroundColor: this._currentIndex == 1 ? Colors.blue: Colors.red, //选中效果
            ),
          ),
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked, //更改浮动位置
          body: this._pageList[this._currentIndex],
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: this._currentIndex,
            onTap: (int index) {
              setState(() {
                this._currentIndex = index;
              });
            },
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text('首页'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.category),
                title: Text('分类'),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.supervised_user_circle),
                title: Text('会员'),
              ),
            ],
          ),
          drawer: Drawer(
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Expanded(
                      child: UserAccountsDrawerHeader(
                        accountName: Text('账户名称'),
                        accountEmail: Text('123456789@qq.com'),
                        currentAccountPicture: CircleAvatar(
                          backgroundImage: NetworkImage(
                              'https://www.itying.com/images/flutter/3.png'),
                        ), //用户头像
                        decoration: BoxDecoration(
                          image: DecorationImage(
                            image: NetworkImage(
                                'https://www.itying.com/images/flutter/2.png'),
                            fit: BoxFit.cover,
                          ),
                        ), //背景
                        otherAccountsPictures: <Widget>[
                          Image.network(
                              'https://www.itying.com/images/flutter/4.png'),
                          Image.network(
                              'https://www.itying.com/images/flutter/5.png'),
                          Text('data')
                        ],
                      ),
                    ),
                  ],
                ),
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.home),
                  ),
                  title: Text('我的空间'),
                  //侧边栏跳转
                  onTap: () {
                    Navigator.of(context).pop(); //隐藏侧边栏
                    Navigator.pushNamed(context, '/user');
                  },
                ),
                Divider(), // 增加一条线
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.people),
                  ),
                  title: Text('用户中心'),
                ),
                Divider(), // 增加一条线
                ListTile(
                  leading: CircleAvatar(
                    child: Icon(Icons.settings),
                  ),
                  title: Text('设置'),
                ),
              ],
            ),
          ),
        );
      }
    }
    

     

    效果展示:

    注:浮动按钮的主要片段

     

     

    展开全文
  • Flutter Button 按钮

    千次阅读 2019-06-11 17:49:59
    Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。 一般常用的 Button 是 MaterialButton、IconButton、Flo.....

    目录

    参数详解

    代码示例

    效果图

    完整代码 


     在 Flutter 里有很多的 Button,包括了:MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

    一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

    RaisedButton:凸起的按钮,其实就是 Material Design 风格的 Button
    FlatButton:扁平化的按钮
    OutlineButton:线框按钮
    IconButton:图标按钮
    ButtonBar:按钮组
    FloatingActionButton:浮动按钮
    DropdownButton:下拉框按钮

     

    参数详解

    属性 说明
    onPressed 点击事件监听,传 null 表示按钮禁用
    onHighlightChanged 水波纹高亮变化回调,按下返回true,抬起返回false
    textTheme 定义按钮主题
    textColor 按钮文字颜色
    disabledTextColor 无效按钮文字颜色
    color 按钮颜色
    disabledColor 无效按钮颜色
    focusColor 获取焦点 按钮颜色
    hoverColor 不知道啥玩应儿
    highlightColor 长按 按钮颜色
    splashColor 点击 水波纹 颜色
    colorBrightness 官网:用于此按钮的主题亮度。默认为主题的亮度
    elevation 阴影
    focusElevation
    hoverElevation
    highlightElevation
    disabledElevation
    padding 内边距
    shape 设置形状,如圆角,圆形等
    clipBehavior

    剪裁

    Clip.antiAlias:剪辑具有抗锯齿功能

    Clip.antiAliasWithSaveLayer:在剪辑后立即剪辑具有抗锯齿和saveLayer

    Clip.hardEdge:剪辑,但不应用抗锯齿。

    Clip.none:不剪辑。

    focusNode  
    materialTapTargetSize  
    animationDuration  
    child  

    OutlineButton 特性

    borderSide

    线框    线颜色 ,如红色:BorderSide(color: Colors.red,),

    clipBehavior

    相框风格,如:Clip.antiAlias

    RaisedButton.icon 特性

    icon

    图标

    label

    通常是文字

    IconButton 特性

    icon

    图标

    color

    图标颜色

    tooltip

    长按文字提示

    DropdownButton 特性    DropdownButton

    hint

    提示语

    value

    当前值

    iconSize

    下拉框图片大小
    icon 右边图标  默认为下三角

    items

    下拉框数据集合

    onChanged

    监听

    FloatingActionButton 特性

    child 子元素,一般为 Icon,不推荐使用文字
    tooltip 长按文字提示
    backgroundColor 背景颜色(默认使用主题颜色)
    mini 是否是 mini 类型默认 false
    设置位置,在外部使用(与FloatingActionButton同级)floatingActionButtonLocation。

    FloatingActionButtonLocation.centerDocked: 底部剧中  与底部无间距

    FloatingActionButtonLocation.centerFloat: 底部剧中  与底部有间距

    FloatingActionButtonLocation.endDocked:右下角  与底部无间距

    FloatingActionButtonLocation.endFloat:右下角  与底部有间距

    FloatingActionButtonLocation.endTop:右上角  

    FloatingActionButtonLocation.startTop:左上角

    代码示例

    return Container(
          padding: EdgeInsets.all(8),
          child: Column(
            children: <Widget>[
              Wrap(
                spacing: 8,
                runSpacing: 8,
                children: <Widget>[
                  RaisedButton(
                    child: Text('普通按钮'),
                    onHighlightChanged:(bool b) {
                      print(b);
                    },
                    onPressed: (){},
                  ),
    
                  RaisedButton(
                    child: Text('带颜色'),
                    onPressed: (){},
                    textColor: Colors.white,
                    color: Colors.blue[200],
                  ),
    
                  RaisedButton(
                    child: Text('带颜色带阴影'),
                    onPressed: (){},
                    textColor: Colors.white,
                    color: Colors.blue[200],
                    elevation: 15,
                  ),
    
                  Container(
                    width: 300,
                    height: 50,
                    child: RaisedButton(
                      child: Text('设置宽高'),
                      onPressed: (){},
                      textColor: Colors.white,
                      color: Colors.blue[500],
                      elevation: 15,
                    ),
                  ),
    
                  RaisedButton.icon(
                    icon: Icon(Icons.account_box),
                    label: Text('我前边有图标'),
                    onPressed: () {},
                  ),
    
                  RaisedButton(
                    child: Text('圆角按钮'),
                    onPressed: (){},
                    color: Colors.red,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)
                    ),
                  ),
    
                  Container(
                    width: 100,
                    height: 100,
                    child: RaisedButton(
                        child: Text('圆形按钮'),
                        onPressed: (){},
                        color: Colors.red,
                        shape: CircleBorder(
                          // side: BorderSide(color: Colors.yellow[500])
                        )
                    ),
                  ),
    
                  RaisedButton(
                    child: Text('水波纹'),
                    onPressed: (){},
                    color: Colors.blue[200],
                    splashColor:Colors.yellow[100],
                  ),
    
                  RaisedButton(
                    child: Text('长按变色'),
                    onPressed: (){},
                    color: Colors.blue[200],
                    highlightColor:Colors.red[500],
                  ),
    
                  FlatButton(
                    child: Text('扁平按钮'),
                    onPressed: (){},
                    color: Colors.blue[200],
                  ),
    
                  OutlineButton(
                    child: Text('边框按钮'),
                    onPressed: (){},
                    textColor: Colors.red,
                    borderSide: BorderSide(color: Colors.red,),
                  ),
    
                  IconButton(
                    icon: Icon(Icons.access_alarms),
                    onPressed: () {},
                    color: Colors.deepOrange,
                    splashColor:Colors.limeAccent,
                    highlightColor:Colors.blue[300],
                    tooltip:'干啥',
                  ),
    
                  DropdownButton(
                    hint:new Text('请选择...'),
                    value: value,//下拉菜单选择完之后显示给用户的值
                    iconSize: 50.0,//设置三角标icon的大小
                    items: <DropdownMenuItem>[
                      DropdownMenuItem(
                        value: '1',
                        child: Text('One'),
                      ),
                      DropdownMenuItem(
                        value: '2',
                        child: Text('Two'),
                      ),
                      DropdownMenuItem(
                        value: '3',
                        child: Text('Three'),
                      ),
                      DropdownMenuItem(
                        value: '4',
                        child: Text('four'),
                      ),
                      DropdownMenuItem(
                        value: '5',
                        child: Text('five'),
                      ),
                    ],
                    onChanged: (v) {
                      setState(() {
                        print(v);
                        value = v;
                      });
                    },
                  ),
                ],
              ),
    
    
              Container(
                color: Colors.pink[100],
                child: ButtonBar(
                  children: <Widget>[
                    RaisedButton(
                      child: Text('按钮一'),
                      onPressed: (){},
                      textColor: Colors.white,
                      color: Colors.blue,
                      elevation: 15,
                    ),
                    RaisedButton(
                      child: Text('按钮二'),
                      onPressed: (){},
                      textColor: Colors.white,
                      color: Colors.blue,
                      elevation: 15,
                    ),
                  ],
                ),
              ),
    
              Container(
                alignment: Alignment.center,
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 30,),
                    Text("一个Button事件与回调,更改数值"),
    
                    SizedBox(height: 15,),
                    Text("$count",style: TextStyle(fontSize: 50,color: Colors.purple,fontWeight:FontWeight.w800)),
                    SizedBox(height: 20,),
    
                    RaisedButton(
                      child: Text('点我',style: TextStyle(fontSize: 18),),
                      onPressed: (){setState(() {
                        count += 1;
                      });},
                      textColor: Colors.white,
                      color: Colors.blue,
                      elevation: 15,
                    ),
                  ],
                ),
              )
            ],
          ),
        );
            //floatingActionButton 按钮
            floatingActionButton: FloatingActionButton(
              backgroundColor: Colors.red[500],
              child: Icon(Icons.add_comment),
              tooltip:'干啥',
              onPressed: () {print('我是Floating Action Button');},
            ),
            //floatingActionButton 按钮位置
            floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

    效果图

     

     

    完整代码 

     查看完整代码

    展开全文
  • Flutter中给我们预先定义好了一些按钮控件给我们用,常用的按钮如下 RaisedButton :凸起的按钮,其实就是Android中的Material Design风格的Button ,继承自MaterialButton FlatButton :扁平化的按钮,继承自...
  • Flutter中的按钮组件

    2020-02-08 11:37:29
    Flutter中常见的按钮组件 RaiseButton:凸起的按钮,Material Design风格的按钮 FlatButton:扁平化按钮 OutlineButton:线框按钮 IconButton:图标按钮 ButtonBar:按钮组 FloatingActionButton:浮动按钮 ...
  • Flutter按钮组件

    2020-06-13 17:09:53
    import 'package:flutter/material.dart'; class buttonDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('title'), actions:...
  • flutter 按钮单选封装

    2019-05-06 10:47:00
    数字是自己先写死的 List list =[ { "title": "影视特效", "type":0, }, { "title": "室内设计", "type":1 }, { "title": "游戏原画", "type":2 }, { ...
  • 文章目录ButtonFloatingActionButtonRaisedButtonFlatButtonOutlineButtonIconButton带图标的按钮...Flutter 提供了三个基本的按钮控件,即 FloatingActionButton、FlatButton 、RaisedButton、OutlineButton、Ico...
  • Flutter按钮添加背景图片及文字

    千次阅读 2019-11-19 18:42:26
    Flutter按钮添加背景图片及文字的一种方法,记录下,上代码 Widget picAndTextButton(String imgpath,String text) { return Container( width: 200, height: 60, decoration: BoxDecoration( color: Colors....
  • 106、Flutter 按钮交互

    2019-05-16 16:25:34
    这一小节通过Flutter中的FlatButton按钮进行事件监听, 然后通过该事件进行用户的交互 主要利用FlatButton中的onPressed事件,进行响应处理操作的绑定 import 'package:flutter/material.dart'; void main() { ...
  • 关于Flutter按钮Shape设置及效果

    千次阅读 2018-12-10 09:32:42
    一个老实的程序猿,都是直接进入主题: Button 设置效果 和 一些样式类使用 BorderSide 内得设置 style: BorderStyle.none 设置颜色 是无效得 style: BorderStyle.solid 设置延是是有效得 ShapeBorder类的使用 ...
  • Flutter按钮总结

    2020-10-16 16:56:37
    1.MateriaButton:Material安卓风格按钮 2.RaisedButton:凸起的按钮 3.FlatButton:扁平的按钮 4.IconButton:图标按钮 5.CupertinoButton:CupertinoIOS风格的按钮 6.OutlineButton:线框按钮 FlatButton( child: ...
  • Flutter设置按钮disable

    千次阅读 2019-11-05 15:03:45
    其实如果只是要让按钮不响应事件,有很多种方法:你可以用变量控制你的逻辑;可以设置 onPressed 为 null;可以用AbsorbPointer 禁用事件...... 我的场景是要给按钮设置disabledColor,在 button 为 enable 时一种...
  • Flutter 闪动按钮效果

    2020-01-08 11:39:05
    Flutter 闪动按钮效果pub仓库地址 Flutter 闪动按钮效果github仓库地址 效果如下: 下载安装: 在 pubspec.yaml 中添加依赖 dependencies: ... twinkle_button: ^0.0.1 在命令行中执行这句话 flutter packages ...
  • Flutter Radio 单选按钮

    2019-10-21 10:06:59
    Flutter Radio 单选按钮
  • Flutter自定义按钮

    2019-07-09 17:05:33
    //自定义按钮组件 class MyButton extends StatelessWidget { final text; final pressed; final double width; final double height; MyButton({this.text, this.pressed = null,this.width = 80.0,this....
  • Flutter禁止按钮点击

    2020-07-02 00:08:34
    查看Flutter的文档可以发现这么一个属性:disableColor属性即不可点击时候的颜色,那么如何让按钮不可点击呢,我们看到这个属性,肯定首先想到的是按钮的disable属性,但是查了文档之后,发现并没有这个属性. ...
  • 圆角边框按钮: Container( padding: EdgeInsets.all(6), decoration: BoxDecoration( border: Border.all(color: Color(0xff5f6fff), width: 1), color:...
  • Flutter布局锦囊---涂鸦风格按钮

    千次阅读 2019-01-03 15:34:32
    “主要矩形”,按钮主体部分,通过调整上下位置来模拟按压效果。 然后就可以开始进行编码了。 第1步:绘制组件树 第2步:实现“可点击框” 通过手势探测器(GestureDetector)组件,你可以通过检测多种手势并...
  • 界面如图: 我们就从上节里面的app.dartt修改 目录:lib lib/story ...import 'package:flutter/material.dart'; import 'cast/cast.dart'; import 'story/story.dart'; import 'de...
  • Flutter 取消按钮水波纹的方法

    千次阅读 2019-12-06 10:47:51
      因为 InkWell 继承自 InkResponse,因此这里只以 InkResponse 来进行分析。 第一种方法:   在 InkResponse 外围添加 Container,然后在 Container 中添加 color 属性,例子如下: return Scaffold( ...
  • 安卓写的多了,见过的那些比较好的控件都想用Flutter写出来,前一阵模仿了个登陆按钮,就在昨天完善了一番,感觉可以拿出手了,听说没图都没兴趣看的!那还是先上图吧(注意:录制的GIF看起来比较卡,实际上丝滑流畅...
  • 1、添加圆角 RaisedButton( color: COLOR_THEME, onPressed: () { print('登陆'); }, child: Text('登陆',style: T...
  • Flutter学习之边框按钮的用法

    千次阅读 2019-04-18 17:57:52
    2、边框按钮OutlineButton用法 OutlineButton( borderSide: BorderSide(color: Theme.of(context).primaryColor), highlightedBorderColor: Theme.of(context).primaryColor, disabledBor...
  • 一个演示渐变的Flutter项目可应用于按钮文本和背景的渐变
  • 自定义渐变背景按钮 文章目录自定义渐变背景按钮先看效果图关键代码:背景渐变色点击触发水波纹具体代码实现:注意点 先看效果图 关键代码: 背景渐变色 BoxDecoration( gradient: const LinearGradient(colors: ...
  • Flutter自定义Drawer弹出按钮 当我们开始创建一个Drawer后,在AppBar左侧会默认出现一个图标,点击它可以弹出drawer,但是有时候我们希望自定义图标,将这个图标换成我们想要的图标。如果我们只是单纯地改变了AppBar...
  • flutter中的按钮组件

    2019-06-19 20:27:00
    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton、FlatButton、IconButton、OutlineButton、ButtonBar、FloatingActionButton 等。 aisedButton :凸起的按钮,其实就是 Material Design ...
  • App开发中比较常用的一个场景是:点击一个按钮button,设置button.setEnabled(false),然后发送一个...那么在flutter中能实现一样的效果吗? 参考:https://stackoverflow.com/questions/49351648/how-do-i-disabl...

空空如也

1 2 3 4 5 ... 20
收藏数 7,118
精华内容 2,847
关键字:

flutter按钮