Flutter学习笔记按钮

最新推荐文章于 2023-08-31 15:04:00 发布

我好菜啊~

最新推荐文章于 2023-08-31 15:04:00 发布

阅读量213

点赞数

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/weixin_42215775/article/details/100924236

版权

Flutter 专栏收录该内容

19 篇文章

订阅专栏

这篇博客详细介绍了Flutter中常用的按钮组件，包括FlatButton、RaisedButton、IconButton、PopupMenuButton、FloatingActionButton、OutlineButton以及ButtonBar的使用方法和示例代码。通过实例展示了如何设置按钮的样式、事件响应以及与其他组件的结合使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
  }) : assert(autofocus != null),
       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,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         child: child,
      );

onPressed和child是必选属性
例：

FlatButton(
  onPressed: () {},
  child: Text('Button'),
  splashColor: Colors.grey,   //溅墨色
  textColor: Colors.pinkAccent,
  color: Colors.black26,
),
FlatButton.icon(
  icon: Icon(Icons.accessibility),
  onPressed: () {},
  label: Text('Button'),
  splashColor: Colors.grey,   //溅墨色
  textColor: Colors.pinkAccent,
  color: Colors.black26,
),

在这里插入图片描述

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,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  })

例：

RaisedButton(
  onPressed: () {},
  child: Text('Button'),
  splashColor: Colors.grey,   //溅墨色
  textColor: Colors.pinkAccent,
),
RaisedButton.icon(
  icon: Icon(Icons.accessibility),
  onPressed: () {},
  label: Text('Button'),
  splashColor: Colors.grey,   //溅墨色
  textColor: Colors.pinkAccent,
  elevation: 12.0,    //跟下面背景层的高度，用阴影效果体现
),

在这里插入图片描述

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.autofocus = false,
    this.tooltip,
  })

icon跟onPressed是必须的
例：

IconButton(
  icon: Icon(Icons.label),
  onPressed: () {},
  color: Colors.pinkAccent,
),

在这里插入图片描述

PopupMenuButton 弹出式菜单按钮

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

例：

PopupMenuButton(
	onSelected: (value) {
	  print(value);
	  setState(() {
	    _currentMenuItem = value;
	  });
	},
	itemBuilder: (BuildContext context) => [
	  PopupMenuItem(
	    value: 'Home',
	    child: Text('Home'),
	  ),
	  PopupMenuItem(
	    value: 'Discover',
	    child: Text('Discover'),
	  ),
	  PopupMenuItem(
	    value: 'Community',
	    child: Text('Community'),
	  ),
	],
),

在这里插入图片描述

FloatingActionButton（漂浮动作按钮）

const FloatingActionButton({
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.splashColor,
    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.autofocus = false,
    this.materialTapTargetSize,
    this.isExtended = false,
  })

例：

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
  elevation: 12.0,
  backgroundColor: Colors.black87,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),  //四个角
  ),//正方形
),

在这里插入图片描述

带图标和文字的漂浮按钮

floatingActionButton: FloatingActionButton.extended(
  onPressed: () {},
  label: Text('label'),
  icon: Icon(Icons.add),
  elevation: 12.0,
  backgroundColor: Colors.black87,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),  //四个角
  ),//正方形
),

在这里插入图片描述

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

例：

DropdownButton(
   items: getListData(),
   hint: Text('下拉选择'),
   value: selectItemValue,
   onChanged: (T) {

   },
   elevation: 24,
 ),

在这里插入图片描述

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,
    bool autofocus = false,
    Widget child,
  })

例：

OutlineButton(
   onPressed: () {},
   child: Text('Button'),
   splashColor: Colors.grey[100],
   borderSide: BorderSide(color: Colors.black,),
   textColor: Colors.black,
   highlightColor: Colors.grey,
 ),

在这里插入图片描述

ButtonBar（横排按钮）

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

例：
在这里插入图片描述