Flutter:为图标按钮添加边框(2 种方法)
【摘要】 Flutter:为图标按钮添加边框(2 种方法)这篇快速文章向您展示了在 Flutter 中创建带边框的图标按钮的几种不同方法。使用 IconButton 和容器您需要做的只是将一个IconButton小部件包装在一个圆形Container小部件中,并使用BoxDecoration为该 Container 添加一个边框。编码:Scaffold( appBar: AppBar(tit...
这篇快速文章向您展示了在 Flutter 中创建带边框的图标按钮的几种不同方法。
使用 IconButton 和容器
您需要做的只是将一个IconButton小部件包装在一个圆形Container小部件中,并使用BoxDecoration
编码:
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)