Flutter开发日常几种Button的使用（OutlinedButton、ElevatedButton）

wangzhongITger

已于 2022-03-23 15:03:44 修改

阅读量5.3k

点赞数

分类专栏：一起来学Flutter 文章标签： Flutter

于 2022-03-23 15:01:55 首次发布

本文链接：https://blog.csdn.net/wangzhongITger/article/details/123684694

版权

一起来学Flutter 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

最近学习Flutter开发，到正式上手公司原有项目重构有段时间了，知识点零零碎碎的，还是在博客里记录更新一下吧，会根据我开发中遇到的内容不断总结更新。

无色背景，有边框的按钮，如下图所示：

代码实现如下：

Container(
      padding: const EdgeInsets.all(14),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,//内部组件靠左对其
        children: [
          Container(
            margin: const EdgeInsets.only(left: 2),
            child: Text(
              '企业征信报告上传',
              style: const TextStyle(
                  fontSize: 14, color: ColorsUtil.fontColor303133),
            ),
          ),
          Container(
            margin: const EdgeInsets.only(left: 2, top: 4, bottom: 16),
            child: const Text(
              '支持上传CSV、XLSX格式',
              style: TextStyle(fontSize: 14, color: ColorsUtil.fontColor919399),
            ),
          ),
          SizedBox(
            width: double.infinity,
            child: OutlinedButton.icon(
              icon: const Icon(
                Icons.add,
                color: ColorsUtil.brand100Color3376FE,
              ),
              onPressed: () {
                _selectFile(item);
              },
              label: const Text(
                '上传附件',
                style: TextStyle(
                    fontSize: 14, color: ColorsUtil.brand100Color3376FE),
              ),
              style: OutlinedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                side: const BorderSide(
                    width: 1, color: ColorsUtil.brand100Color3376FE),
              ),
            ),
          ),
        ],
      ),
    )

OutlinedButton可直接使用，也可以加icon的方式在内部添加一个图表，就像我图里面的+号，按钮内部的文字可以在label属性里实现，在style属性里可以通过OutlinedButton.styleFrom来设定边框的样式，比如边框的圆角以及边框的颜色宽度等。

接下来是有背景色的Button，如下图所示：

代码实现如下：

 Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
              child: ElevatedButton(
                onPressed: () {
                  
                },
                child: const Text(
                  '保存并分析',
                  style: TextStyle(fontSize: 16),
                ),
                style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(8))),
                    padding: MaterialStateProperty.all(
                        const EdgeInsets.symmetric(vertical: 12)),
                    backgroundColor: MaterialStateProperty.all(
                        ColorsUtil.brand100Color3376FE)),
              ),
            )

简单使用如上述所示，在style中通过ButtonStyle来设置相应的按钮形状、边距、背景色都属性。