Flutter：ButtonStyle() 和 .styleFrom() 有什么区别

Question

我是 Flutter 新手

这是我的代码，

对于 ElevatedButton，

ElevatedButton(
                  onPressed: () {
                    // Add your onPressed code here!
                  },
                  child: Text("Login"),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                          AppColors.SecondaryColor),
                      foregroundColor: MaterialStateProperty.all<Color>(
                          AppColors.PrimaryColor))),

对于 OutlinedButton，

OutlinedButton(
                  onPressed: () {
                    // Add your onPressed code here!
                  },
                  child: Text("Register Now"),
                  style: OutlinedButton.styleFrom(
                    side: BorderSide(width: 2, color: AppColors.SecondaryColor),
                  ))

我的问题是为什么我必须为 OutlinedButton 使用 styleFrom 而不是 ButtonStyle？如果将 OutlinedButton.styleFrom 替换为 ButtonStyle，则会出错。为什么？

我对 ButtonStyle 和 styleFrom 的用法感到很困惑。因为网上的例子有的用的是ButtonStyle，有的用的是styleFrom.

Answer 1

如文档所述，styleFrom() 方法是应用 Button Style 的更简单方法：

A static convenience method that constructs an elevated button [ButtonStyle] given simple values.

所有三个新 Material 按钮（TextButton、OutlinedButton 和 ElevatedButton）的行为相同

Answer 2

你得到了什么错误？

如文档所述，ElevatedButton and OutlinedButton 同时支持 ButtonStyle() 和 .styleFrom()。

使用 ButtonStyle() 您必须定义所有必需的属性，使用 ButtonStyle.styleFrom() 选择默认设置值，您只需更改所需的值。

如果您能说出在 OutlinedButton 中使用 ButtonStyle() 时出现的错误，我们会更容易帮助您

---------------------------------------- ---------------------------------------------- -------------------------- 更新的答案

是的，因为 ButtonStyle() 中的 side 参数需要 MaterialStateProperty 的值而不是 BorderSide 的值。使用此代码查看其工作原理：

OutlinedButton(
              onPressed: null,
              child: Text('Outlined Button'),
              style: ButtonStyle(
                side: MaterialStateProperty.all(
                  BorderSide.lerp(
                      BorderSide(
                        style: BorderStyle.solid,
                        color: Color(0xffe4e978),
                        width: 10.0,
                      ),
                      BorderSide(
                        style: BorderStyle.solid,
                        color: Color(0xffe4e978),
                        width: 10.0,
                      ),
                      10.0),
                ),
              ),
            ),

输出：

请参阅此 link 以了解更多信息。

Flutter：ButtonStyle() 和 .styleFrom() 有什么区别

Flutter: What is the difference ButtonStyle() and .styleFrom()

flutter

flutter-widget