将容器盒装饰应用于按钮内部

Question

容器盒的装饰可以应用于里面的按钮吗？例如，我试图在提升的按钮中设置圆形边框。它不适用于这种情况。

Container(
height: 100,
width: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
),
child: ElevatedButton(
style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 15)),
onPressed: ()  async { navigateToBasketPage(context);
},
child: const Text('My basket'),
),
),

谢谢！

Answer 1

您可以直接设置按钮样式。但是如果要将Container边界应用于其子级。只需将clipBehavior: Clip.hardEdge属性添加到Container即可。

Answer 2

要将decoration添加到ElevatedButton，您可以使用ElevatedButton的style属性，在该属性中，您可以通过两种方式应用decoration

第一个：

ElevatedButton(
onPressed: () {},
child: Text(""),
style: ElevatedButton.styleFrom(),
)

第二：

ElevatedButton(
onPressed: () {},
child: Text(""),
style: ButtonStyle(),
)

在第二种方法中，您必须使用MaterialStateProperty将值传递到字段，而在第一种方法中您可以以正常方式传递值。