如何在flutter中同时使用ButtonStyle()和ElevatedButton.styleFrom()?

gmol1639  于 2023-01-27  发布在  Flutter
关注(0)|答案(3)|浏览(239)

嗨,我是新的flutter,我想应用禁用的颜色和全屏宽度到ElevatedButton。
为了上色,我这样做:

ElevatedButton(
  style : ButtonStyle(
    backgroundColor : MaterialStateProperty.resolveWith<Color>(
      (Set<MaterialState> states) {
        if (states.contains(MaterialState.disabled)) {return Colors.green;}
        else {return Colors.blue;}
      }
    ),
    ...

对于应用宽度,我是这样做的:

ElevatedButton(
  style : ElevatedButton.styleFrom(
    minimumSize : const Size.fromHeight(50)
  ),
  ...

但是我不知道怎样才能把它们结合起来。请告诉我。
谢谢你,

yiytaume

yiytaume1#

您也可以在ButtonStyle中设置minimumSize,如下所示:

ElevatedButton(
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size.fromHeight(50)), /// <--- add this
    backgroundColor: MaterialStateProperty.resolveWith<Color>(
        (Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        return Colors.green;
      } else {
        return Colors.blue;
      }
    }),
  ),
  onPressed: (){},
  child: Container(),
)
pprl5pva

pprl5pva2#

您可以使用merge扩展名

ElevatedButton(
            onPressed: null,
            style:
                ElevatedButton.styleFrom(minimumSize: const Size.fromHeight(50))
                    .merge(ButtonStyle(    // 👈 use merge here
              backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                if (states.contains(MaterialState.disabled)) {
                  return Colors.green;
                } else {
                  return Colors.blue;
                }
              }),
            )),
            child: const Text("Hello"),
          ),

通过这种方法,您将能够为ElevatedButton使用minimumSizebackgroundColor属性。
您还可以使用ElevatedButton.styleFrom()ButtonStyle()具有的其他属性,并根据需要将它们组合在一起。

2wnc66cl

2wnc66cl3#

style属性用于自定义按钮的外观。首先,它使用ElevatedButton.styleFrom()方法创建一个新的ButtonStyle对象,并将minimumSize属性设置为Size.fromHeight(40),这意味着按钮的最小高度为40。
然后,它使用merge()方法将新创建的ButtonStyle对象与现有的ButtonStyle对象合并,这样就可以自定义按钮的样式,而不必覆盖现有的样式。
然后,它使用backgroundColor属性,通过使用MaterialStateProperty.resolveWith方法,根据按钮的启用/禁用状态设置按钮的背景色,该方法允许您提供一个回调,该回调根据按钮的MaterialState返回不同的颜色。
此回调通过检查状态集中是否存在MaterialState.disabled来检查按钮是否处于禁用状态,如果存在,则返回灰色,否则返回蓝色。
最后,它将child属性设置为文本为“Action Title”的Text小部件,该小部件显示在按钮上。
按钮将呈现为禁用状态,其背景色为灰色,最小高度为40,并显示文本“操作标题”

ElevatedButton(
            onPressed: (){
//action
},     
            style:
                ElevatedButton.styleFrom(
minimumSize: const Size.fromHeight(40))
                    .merge(ButtonStyle(    // 👈 use merge here
              backgroundColor: MaterialStateProperty.resolveWith<Color>(
                  (Set<MaterialState> states) {
                if (states.contains(MaterialState.disabled)) {
                  return Colors.grey;
                } else {
                  return Colors.blue;
                }
              }),
            )),
            child: const Text("Action Title"),
          ),

可以将null传递给onPressed属性以查看按钮的禁用状态。

ElevatedButton(
            onPressed: null,
    // other properties
    )

相关问题