英文:
How to customize SlidableAction to look like a round button in flutter?
问题
我成功实现了圆角，但无法找到如何减小默认填充并使它成为圆形按钮。
SlidableAction（）
onPressed:（context）{
// 做某事
}，
autoClose：true，//我需要这个功能
icon：FeatherIcons.copy，
目前的输出（SlidableAction）
所需输出（Slidable 子项中的容器）
英文:
I was able to add rounded corners but could not figure out how to reduce the default padding and make it a round button.
SlidableAction(
onPressed: (context) {
// do something
},
autoClose: true, // I need this functionality
icon: FeatherIcons.copy,
),
Current Output (SlidableAction)
Required Output(Container in Slidable children)
答案1
得分: 1
你可以尝试使用ElevatedButton而不是Slidable Action，我将分享示例代码。
ActionPane(
motion: ScrollMotion(),
children: [
Builder(
builder: (cont) {
return ElevatedButton(
onPressed: () {
Slidable.of(cont)!.close();
},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
backgroundColor: Colors.red,
padding: EdgeInsets.all(10),
),
child: const Icon(
Icons.delete,
color: Colors.white,
size: 25,
),
);
},
),
],
),
英文:
You could try and use ElevatedButton instead of Slidable Action , I will share example code
ActionPane(
motion: ScrollMotion(),
children: [
Builder(
builder: (cont) {
return ElevatedButton(
onPressed: () {
Slidable.of(cont)!.close();
},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
backgroundColor: Colors.red,
padding: EdgeInsets.all(10),
),
child: const Icon(
Icons.delete,
color: Colors.white,
size: 25,
),
);
},
),
],
),
答案2
得分: 0
有多种方法可以实现这一点
您可以使用 shape: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
或者
您可以使用圆形头像
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors white,
onPressed: () {},
),
),
英文:
There's multiple ways to achieve that
You can use the shape: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
OR
You can use circle avatar
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论