无法为 OutlineButton 设置填充颜色 [重复]答案

【问题标题】：Cannot set fill color for OutlineButton [duplicate]无法为 OutlineButton 设置填充颜色 [重复]
【发布时间】：2019-04-28 18:27:26
【问题描述】：

OutlineButton 的documentation 表示color 属性填充按钮颜色并且默认情况下是透明的。具体来说，Flutter 文档提到了颜色属性：“颜色 → 颜色当按钮处于默认（未按下、启用）状态时，按钮的填充颜色由其材质显示。"

但是设置color属性没有效果：

OutlineButton(
        color: Colors.orange,
        textColor: BmsColors.primaryForegroundColor,
        borderSide: BorderSide(color: BmsColors.primaryForegroundColor, width: 2.0),
        shape: new RoundedRectangleBorder(
          borderRadius:
              new BorderRadius.circular(8.0),
        ),
        child: Text(
          this.text,
          style: TextStyle(fontFamily: 'Lalezar', fontWeight: FontWeight.w400),
        ),
        onPressed: () {},
      );

【问题讨论】：

但只有在按下时才会被橙色 color: Colors.orange 填充。否则将是透明的。如果您想要一个填充按钮，您可以尝试使用 RaisedButton。你到底想达到什么目的？
嗨@Hosar，我想要一个像屏幕截图一样的金色边框和黑色填充颜色
@Hosar，Flutter 文档说，“颜色→颜色按钮的填充颜色，由其材质显示，而它处于默认（未按下，启用）状态。”所以我相信你是不正确的 Hosar，不仅仅是按下时
您可以使用 RaisedButton 和 RoundedRectangleBorder 来做到这一点，请参阅我的回答。

标签： dart flutter

【解决方案1】：

如果你查看OutlineButton的源代码，有一个方法可以得到填充颜色

      Color _getFillColor() {
        if (widget.highlightElevation == null || widget.highlightElevation == 0.0)
          return Colors.transparent;
        final Color color = widget.color ?? Theme.of(context).canvasColor;
        final Tween<Color> colorTween = ColorTween(
          begin: color.withAlpha(0x00),
          end: color.withAlpha(0xFF),
        );
        return colorTween.evaluate(_fillAnimation);
      }

但是这个方法有一个if条件，它只在highlightElevation与0不同时才使用color，并且它还使用colorTween从color.withAlpha(0x00)到@987654329的动画@。

所以当你按下它时它会从透明变成你的颜色。

您可以根据需要创建自己的 OutlineButton 小部件，这是我制作的示例：

    class MyCustomOutlineButton extends StatelessWidget {
      final String text;
      final VoidCallback onPressed;
      final Color color;

      const MyCustomOutlineButton({Key key, this.text, this.onPressed, this.color})
          : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Container(
          decoration: BoxDecoration(
            border: Border.all(color: Colors.yellow, width: 2.0),
            color: color,
            borderRadius: BorderRadius.circular(8.0),
          ),
          margin: EdgeInsets.all(2.0),
          child: RawMaterialButton(
            fillColor: color,
            elevation: 0,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(8.0),
            ),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 14.0),
              child: Text(
                text,
                style: TextStyle(
                    fontFamily: 'Lalezar',
                    fontWeight: FontWeight.w400,
                    color: Colors.yellow),
              ),
            ),
            onPressed: onPressed,
          ),
        );
      }
    }

用法

  MyCustomOutlineButton(
            text: "Become a Member",
            color: Colors.orange,
            onPressed: () {
              print("here");
            },
          ),

【讨论】：

我开始在 Medium 和 Twitter 上关注你的一个有凝聚力、有帮助、编写良好的代码答案 :)。我自己对 Flutter 感到非常兴奋，并且真的认为它可以改变行业的游戏规则。
为什么顺便把你的构造函数标记为 MyCustomOutlineButton const？
@BrianOgden 它是由 IDE (VSCode) 生成的，但在可能的情况下使用 const 是一个好习惯，特别是在构造函数中

【解决方案2】：

根据需要，您可以使用简单的 RaisedButton 和 RoundedRectangleBorder。参见例如：

Container(
            color: Colors.pink,
            child: RaisedButton(
              color: Colors.black,
              child: Text('Become a member', style: TextStyle(color: Colors.yellow)),
              onPressed: () {
                print('Hello');
              },
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10.0),
                  side: BorderSide(color: Colors.yellow, width: 5.0)),
            ),
          )

边框颜色可以用BorderSide指定，填充颜色就是RaisedButton的正常颜色属性。
希望对您有所帮助。

【讨论】：