Flutter快速上手1.4：基础控件之Button

Button的通用属性

属性名	类型	简介
onPressed	VoidCallback	点击事件监听
onLongPress	VoidCallback	长按事件监听
onHover	ValueChanged<bool>	鼠标悬停时回调
style	ButtonStyle	定义按钮样式
disabledColor	Color	禁用按钮时颜色
focusColor	Color	获取焦点时按钮颜色
splashColor	Color	水波纹效果的初始化颜色
hoverColor	Color	当指针悬停在按钮上时的填充颜色
highlightColor	Color	水波纹的高亮颜色
elevation	double	阴影高度
hoverElevation	double	指针悬停在按钮上时的阴影
focusElevation	double	获取焦点时的阴影
highlightElevation	double 高亮时的阴影
disabledElevation	double	禁用时的阴影
colorBrightness	Brightness	用于此按钮的主题亮度
child	Widget	子控件
padding	MaterialStateProperty	内边距
shape	ShapeBorder	设置形状
clipBehavior	Clip	剪裁
focusNode	FocusNode	用于焦点管理和监听
animationDuration	Duration	设置按钮形状和阴影变化的持续时间
materialTapTargetSize	MaterialTapTargetSize	配置点击目标的最小大小
enableFeedback	bool	是否开启按钮触觉反馈

一、TextButton 文字按钮

二、ElevatedButton凸起按钮

三、IconButton图标按钮

四、OutlinedButton线框按钮

五、CupertinoButton苹果风格按钮

下面概览一下，后面具体场景用到了再来补充

Wrap(
                spacing: 15,
                alignment: WrapAlignment.center,
                children: [
                  TextButton(
                    child: const Text(
                      "TextButton",
                      style: TextStyle(color: Colors.red),
                    ),
                    onPressed: () {
                      print('TextButton');
                    },
                    onHover: (v) {
                      print('onHover');
                    },
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.yellow),
                      padding:
                          MaterialStateProperty.all(const EdgeInsets.all(25)),
                    ),
                    child: const Text(
                      'ElevatedButton',
                      style: TextStyle(color: Colors.red),
                    ),
                    onPressed: () {
                      print('ElevatedButton');
                    },
                  ),
                  IconButton(
                    onPressed: () {
                      print('IconButton');
                    },
                    icon: const Icon(Icons.pageview),
                  ),
                  OutlinedButton(
                    onPressed: () {
                      print('OutlinedButton');
                    },
                    child: const Text('OutlinedButton'),
                  ),
                  CupertinoButton(
                      padding: EdgeInsets.all(5),
                      color: Colors.pinkAccent,
                      child: const Text('苹果按钮'),
                      onPressed: () {
                        print('CupertinoButton');
                      }),
                ],
              ),

WX20220419-152025.png

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初学Flutter ，文章会根据学习进度不定时更新，请多多指教~~