dart 无法在OutlinedButton中更改边框颜色

9fkzdhlc 于 2023-11-14 发布在其他

关注(0)|答案(5)|浏览(125)

我试图在我的main.dart中更改我的OutlinedButton的边框，但似乎不起作用。我一直在四处寻找，似乎需要添加BorderSide。这是我的outlinedButtonTheme的外观：

outlinedButtonTheme: OutlinedButtonThemeData(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.resolveWith<Color>(
                    (Set<MaterialState> states) {
                      if (states.contains(MaterialState.pressed)) {
                        return AppColors.SecondaryButtonPressed;
                      }

                      return AppColors.SecondaryButton;
                    },
                  ),
                  minimumSize: MaterialStateProperty.all<Size>(Size(335, 60)),
                  shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                    side: BorderSide(
                        style: BorderStyle.solid,
                        color: AppColors.Primary,
                        width: 1), // <-- this doesn't work?
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  )),
                  foregroundColor: MaterialStateProperty.all<Color>(
                      AppColors.SecondaryButtonText),
                  textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(
                    color: AppColors.SecondaryButtonText,
                    fontSize: 14 * FONT_SCALE_FACTOR,
                    fontWeight: FontWeight.w600,
                  )),
                ),
              ),

字符串
上面显示的是BorderSide的位置。看起来这根本不起作用。

dart

来源：https://stackoverflow.com/questions/66678974/cannot-change-border-color-in-outlinedbutton

5条答案

按热度按时间

lskq00tm1#

这对我来说很有效：

OutlinedButton(onPressed: () {},
    style: ButtonStyle(shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0))),
                  side: MaterialStateProperty.all(BorderSide(
                    color: AppColors.blue,
                  )),
                ),)

字符串

赞(0）回复(0）举报 2023-11-14

tuwxkamq2#

我按照new material buttons的指南解决了这个问题：

OutlinedButton.icon(
          style: OutlinedButton.styleFrom(
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(5)),
            ),
          ).copyWith(
            side: MaterialStateProperty.resolveWith<BorderSide>(
              (Set<MaterialState> states) {
                if (states.contains(MaterialState.disabled)) return null;
                return BorderSide(
                  color: Theme.of(context).primaryColor,
                  width: 3,
                );
                // Defer to the widget's default.
              },
            ),
          ),
     ...

字符串
我需要为禁用状态和激活状态指定不同的颜色，因为我希望边框在激活时有颜色，而在禁用时没有颜色（返回null，因为默认情况下边框没有颜色，不像旧按钮）

赞(0）回复(0）举报 2023-11-14

lzfw57am3#

我在看ButtonStyle中的文档时错过了一些东西。
我加

side: MaterialStateProperty.all<BorderSide>(
                      BorderSide(color: AppColors.Primary)),

字符串
在ButtonStyle中，它可以工作，而不是将其添加到内部

shape: MaterialStateProperty.all<OutlinedBorder>(
                      RoundedRectangleBorder(
                    side: BorderSide(
                        style: BorderStyle.solid,
                        color: AppColors.Primary,
                        width: 1), // <-- this doesn't work at all in shape.
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  )),

型

赞(0）回复(0）举报 2023-11-14

q9yhzks04#

使用样式属性：

OutlinedButton(
  onPressed: () {},
  child: Text('Button'),
  style: OutlinedButton.styleFrom(
    side: BorderSide(width: 1.0, color: Colors.red),
  ),
)

字符串

的数据

赞(0）回复(0）举报 2023-11-14

jm81lzqq5#

使用OutlinedButton的side属性。不要在OutlinedButton的shape属性中使用它。

OutlinedButton(
                                onPressed: () {},
                                style: OutlinedButton.styleFrom(
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(10),
     // side: BorderSide(width:1.0, color: Colors.red), // DON'T USE HERE
                                  ),
                                  side: BorderSide(width:1.0, color: Colors.red),
                                  minimumSize: Size( width * 0.25, height * 0.04),
                                ),
                                child: Text('Decline', style: TextStyle(color: Colors.red),),
                              ),

字符串

赞(0）回复(0）举报 2023-11-14

我来回答

dart 无法在OutlinedButton中更改边框颜色

5条答案

相关问题

热门标签

最新问答