Flutter 常用按钮组件浅析_flutter outlinedbutton

1、按钮

Material 组件库中，为我们提供了多种按钮组件，

如 ElevatedButton 、TextButton 、 OutlinedButton 等

另外，Material 库中所有的按钮组件都有一个相同的特性，那就是水波纹动画效果，还有一个onPressed 属性，用来设置按钮的点击回调。

ElevatedButton 即漂浮按钮，它带有阴影和灰色的背景，按下后，阴影会变大，如下图

ElevatedButton 按钮的使用非常的简单

            ElevatedButton(
              onPressed: () {},
              child: Text("ElevatedButton"),
            ),
1
2
3
4

TextButton 即文本按钮，默认背景透明，并不带阴影，按下的时候，会有一个背景色，如下图

TextButton 的使用也非常的简单

            TextButton(
              onPressed: (){},
              child: Text("TextButton"),
            )
1
2
3
4

OutlinedButton 默认会有一个边框，不带阴影且背景透明。按下后，边框的颜色会变亮、同时会出现背景和阴影效果，如下图

OutlinedButton 的使用也非常的简单

            OutlinedButton(
              onPressed: () {},
              child: Text("OutlinedButton"),
            )
1
2
3
4

IconButton 是一个图标按钮，可以生成一个可电影的icon ，不包括文字，没有默认背景，点击后会出现背景动画，如下图

IconButton 的使用也非常的简单

            IconButton(
              onPressed: () {},
              icon: Icon(Icons.theater_comedy),
            )
1
2
3
4

带图标的按钮

其实我们上述的这些按钮，大部分都可以说是一个可带图标的按钮，
因为ElevatedButton 、 TextButton、OutlinedButton 都有一个icon构造函授，通过它可以轻松的创建带图标的按钮，如下图

代码如下：

            ElevatedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.send),
              label: Text("ElevatedButton"),
            ),

            TextButton.icon(
              onPressed: (){},
              icon: Icon(Icons.safety_divider),
              label: Text("TextButton"),
            ),

            OutlinedButton.icon(
              onPressed: () {},
              icon: Icon(Icons.abc),
              label: Text("OutlinedButton"),
            )

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

下一节我将为大家介绍 图片及Icon 的使用