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

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

使用 IconButton 和容器

您需要做的就是简单地将ICONBUTTON小部件包装在圆形容器小部件中,然后使用 BoxDecoration在该容器中添加边框。

截屏:

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

代码:

Scaffold(
      appBar: AppBar(title: const Text('KindaCode.com')),
      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个图标按钮。

截屏:

Flutter:为图标按钮添加边框(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,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
);
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Flutter:为图标按钮添加边框(2 种方法)