【Flutter】基础组件【09】Button

Container(
                  color: Colors.orange,
                  child: TextButton(
                    onPressed: () {
                      print("TextButton");
                    },
                    child: Text('TextButton'),
                  )
              )

TextButton 和 FlatButton

TextButton 和 FlatButton对比

2.3.2 ElevatedButton

使用凸起的按钮为原本大部分为平面的布局添加维度，例如在长而繁忙的内容列表中，或在广阔的空间中。避免在对话框或卡片等已经凸起的内容上使用凸起的按钮。

ElevatedButton(
                  child: Text('ElevatedButton'),
                  onPressed: () {
                    print("ElevatedButton");
                  },
                ),

ElevatedButton

2.3.3 ButtonBar

ButtonBar，它里面可以放多个Button，ButtonBar可以给里面的button做统一样式处理。

Container(
            color: Colors.yellow,
            width: 450,
            child: ButtonBar(
              buttonPadding: EdgeInsets.all(5),
              buttonHeight: 30,
              alignment: MainAxisAlignment.spaceBetween,
              buttonTextTheme: ButtonTextTheme.primary,
              layoutBehavior: ButtonBarLayoutBehavior.padded,
              children: [
                ElevatedButton(
                  child: Text('ElevatedButton'),
                  onPressed: () {
                    print("ElevatedButton");
                  },
                ),
                RaisedButton(
                  child: Text('RaisedButton1'),
                  onPressed: () {
                    print("RaisedButton1");
                  },
                ),
                RaisedButton(
                  child: Text('RaisedButton2'),
                  onPressed: () {
                    print("RaisedButton2");
                  },
                ),
              ],
            ),
          )

ButtonBar效果展示

2.3.4 OutlinedButton

一个 Material Design 的“Outlined Button”, 本质上是一个带有轮廓边框的 TextButton。

代码举例

OutlineButton和OutlinedButton代码运行效果对比

OutlineButton和OutlinedButton效果对比

2.3.5 FloatingActionButton

一个 material design的浮动按钮。
浮动操作按钮是一个圆形图标按钮，它悬停在内容上以提升应用程序中的主要操作。浮动操作按钮最常用于[Scaffold.floatingActionButton] 场景。

FloatingActionButton如果存在多个需要指定heroTag

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主轴
            crossAxisAlignment: CrossAxisAlignment.center,//交叉轴
            textBaseline: TextBaseline.alphabetic,//文本对齐
            children: [
              Center(
                child: FloatingActionButton(
                    child: Text('111111Button333'),
                    onPressed: () {
                      print("FloatingActionButton");
                    }),
              ),
              Center(
                child: FloatingActionButton(
                    heroTag: '2',
                    child: Icon(Icons.access_alarm_rounded),
                    onPressed: () {
                      print("FloatingActionButton2");
                    }),
              ),
            ],
          )

FloatingActionButton代码运行效果

FloatingActionButton

2.3.6 IconButton

IconButton是 material design的图标按钮，IconButton是打印在 [Material] 小部件上的图片，通过填充颜色来对触摸做出反应。

IconButton通常用于 [AppBar.actions] 场景，但它们也可以用于许多其他地方。

代码举例

代码运行IconButton效果

代码运行IconButton效果

2.3.7 圆角Button

这里用RaisedButton来举例，其实这几个Button都差不多，只是各自有一个独特的初始化属性而已，比如RaisedButton就是自带圆角，有水波纹特效，带阴影等属性。

圆角Button举例

切圆角

除了圆角 button，我们还有使用圆角的需求，比如一个Container如何切成圆角的呢？这就可以借助decoration来实现了，代码如下：

Center(
            child: Container(
              width: 100,
              height: 70,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.orange
              ),
              child: Text('我是文字',style: TextStyle(fontSize: 14),textAlign:TextAlign.center,),
            ),
          )

效果如下：

代码运行效果

3. 写在后面

关注我，更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的，可以来一波收藏+关注，以免你下次找不到我😁🌹

🌹欢迎大家留言交流，批评指正，转发请注明出处，谢谢支持！🌹

【Flutter】基础组件【09】Button

1. 写在前面

2. Button介绍

2. 1 常用的Button类型

2.2 Button常用属性

2.3 代码举例

2.3.1 TextButton