Flutter:为图标按钮添加边框(2 种方法)

举报
坚果的博客 发表于 2022/08/24 21:03:23 2022/08/24
【摘要】 Flutter:为图标按钮添加边框(2 种方法)这篇快速文章向您展示了在 Flutter 中创建带边框的图标按钮的几种不同方法。使用 IconButton 和容器您需要做的只是将一个IconButton小部件包装在一个圆形Container小部件中,并使用BoxDecoration为该 Container 添加一个边框。编码:Scaffold( appBar: AppBar(tit...

Flutter:为图标按钮添加边框(2 种方法)

这篇快速文章向您展示了在 Flutter 中创建带边框的图标按钮的几种不同方法。

使用 IconButton 和容器

您需要做的只是将一个IconButton小部件包装在一个圆形Container小部件中,并使用BoxDecoration为该 Container 添加一个边框。

编码:

Scaffold(
      appBar: AppBar(title: const Text('JianGUO')),
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            border: Border.all(width: 10, color: Colors.blue),
            color: Colors.amber.shade200,
            shape: BoxShape.circle,
          ),
          child: IconButton(
            iconSize: 150,
            icon: const Icon(
              Icons.play_arrow,
              color: Colors.pink,
            ),
            onPressed: () {
              print('Hi There');
            },
          ),
        ),
      ),
);

使用 Material、Ink 和 InkWell 小部件

您还可以使用Material小部件、Ink小部件和InkWell小部件的组合来创建带边框的图标按钮。闪光/涟漪效果将保持不变。下面的示例使用此技术生成 2 个图标按钮。

截屏:

编码:


Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // square icon button
            Material(
              type: MaterialType.transparency,
              child: Ink(
                decoration: BoxDecoration(
                  // set the border
                  border: Border.all(width: 10, color: Colors.blue),
                  // background color
                  color: Colors.amber.shade100,
                ),
                child: InkWell(
                  onTap: () {
                    print("Hi");
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(30.0),
                    child: Icon(
                      Icons.laptop_mac,
                      size: 100,
                      color: Colors.blue,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 30),
​
            // circular icon button
            Material(
              type: MaterialType.transparency,
              child: Ink(
                decoration: BoxDecoration(
                  // set the border
                  border: Border.all(width: 10, color: Colors.deepOrange),
                  // border radius
                  borderRadius: BorderRadius.circular(100),
                  // background color
                  color: Colors.black,
                ),
                child: InkWell(
                  borderRadius: BorderRadius.circular(100.0),
                  onTap: () {
                    print("Hello");
                  },
                  child: const Padding(
                    padding: EdgeInsets.all(30.0),
                    child: Icon(
                      Icons.rocket,
                      size: 100,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
);

而已。进一步阅读:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。