Flutter开发⽇常⼏种Button的使⽤（OutlinedButton、
Elevate。。。
最近学习Flutter开发，到正式上⼿公司原有项⽬重构有段时间了，知识点零零碎碎的，还是在博客⾥记录更新⼀下吧，会根据我开发中遇到的内容不断总结更新。
⽆⾊背景，有边框的按钮，如下图所⽰：
代码实现如下：
1Container(
2      padding: const EdgeInsets.all(14),
3      child: Column(
4        crossAxisAlignment: CrossAxisAlignment.start,//内部组件靠左对其
5        children: [
6          Container(
7            margin: ly(left: 2),
8            child: Text(
9              '企业征信报告上传',
10              style: const TextStyle(
11                  fontSize: 14, color: ColorsUtil.fontColor303133),
12            ),
13          ),
14          Container(
15            margin: ly(left: 2, top: 4, bottom: 16),
16            child: const Text(
17              '⽀持上传CSV、XLSX格式',
18              style: TextStyle(fontSize: 14, color: ColorsUtil.fontColor919399),
19            ),
20          ),
21          SizedBox(
22            width: double.infinity,
23            child: OutlinedButton.icon(
24              icon: const Icon(
25                Icons.add,
26                color: ColorsUtil.brand100Color3376FE,
27              ),
28              onPressed: () {
29                _selectFile(item);
30              },
31              label: const Text(
32                '上传附件',
33                style: TextStyle(
34                    fontSize: 14, color: ColorsUtil.brand100Color3376FE),
35              ),
36              style: OutlinedButton.styleFrom(
37                shape: RoundedRectangleBorder(
38                  borderRadius: BorderRadius.circular(8),
39                ),
40                side: const BorderSide(
41                    width: 1, color: ColorsUtil.brand100Color3376FE),
42              ),
43            ),
44          ),
45        ],
46      ),
47    )
OutlinedButton可直接使⽤，也可以加icon的⽅式在内部添加⼀个图表，就像我图⾥⾯的+号，按钮内部的⽂字可以在label属性⾥实现，在style属性⾥可以通过OutlinedButton.styleFrom来设定边框的样式，⽐如边框的圆⾓以及边框的颜⾊宽度等。
接下来是有背景⾊的Button，如下图所⽰：
代码实现如下：
1 Container(
2              width: double.infinity,
3              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
4              child: ElevatedButton(
5                onPressed: () {
6
7                },
8                child: const Text(
9                  '保存并分析',
10                  style: TextStyle(fontSize: 16),
11                ),
12                style: ButtonStyle(
13                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
14                        borderRadius: BorderRadius.circular(8))),
textstyle
15                    padding: MaterialStateProperty.all(
16                        const EdgeInsets.symmetric(vertical: 12)),
17                    backgroundColor: MaterialStateProperty.all(
18                        ColorsUtil.brand100Color3376FE)),
19              ),
20            )
简单使⽤如上述所⽰，在style中通过ButtonStyle来设置相应的按钮形状、边距、背景⾊都属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。