如何更改大纲按钮的大小？答案

【问题标题】：How to change outline button size?如何更改大纲按钮的大小？
【发布时间】：2019-05-05 06:14:07
【问题描述】：

这是一个愚蠢的问题，但我是 Flutter 的新手。所以我希望你们能帮助我解决这个问题。有没有办法让我改变颤动按钮的大小？

矩形：

      OutlineButton(
        child: Text(forgot_password, style: TextStyle(color: colorWhite)),
        borderSide: BorderSide(
          color: colorWhite,
          style: BorderStyle.none,
          width: 0.8,
        ),
        onPressed: () {},
      ),

圆形：

      OutlineButton(
            onPressed: () {},
            child: Icon(
              FontAwesomeIcons.google,
              color: colorWhite,
              size: 20.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: colorWhite,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),

【问题讨论】：

标签： dart flutter

【解决方案1】：

您可以使用“ButtonTheme”更改按钮的大小，如下所示：

对于矩形：

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
            child:   OutlineButton(
              child: Text('forgot_password', style: TextStyle(color: Colors.green)),
              borderSide: BorderSide(
                color: Colors.amber,
                style: BorderStyle.solid,
                width: 1.8,
              ),
              onPressed: () {},
            ),
          ),

对于圆形：

ButtonTheme(
          minWidth: 200.0,
          height: 100.0,
          child: OutlineButton(
            onPressed: () {},
            child: Icon(
              Icons.screen_lock_portrait,
              color: Colors.redAccent,
              size: 40.0,
            ),
            shape: CircleBorder(),
            borderSide: BorderSide(
              color: Colors.blue,
              style: BorderStyle.solid,
              width: 1,
            ),
          ),
        )

您也可以使用 Container 以及 SizedBox，如下所示：

容器

Container(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),

大小框

SizedBox(
          width: 200.0,
          height: 100.0,
          child: OutlineButton(
            child: Text('Login', style: TextStyle(color: Colors.green)),
            borderSide: BorderSide(
              color: Colors.amber,
              style: BorderStyle.solid,
              width: 1.8,
            ),
            onPressed: () {},
          ),
        ),

【讨论】：

【解决方案2】：

您可以使用如下所示的 ButtonTheme 或 SizedBox

ButtonTheme(
  width: 100.0,
  height: 50.0,
  child: OutlineButton(
    child: Text('forgot_password', style: TextStyle(color: Colors.green)),
    borderSide: BorderSide(
      color: Colors.amber,
      style: BorderStyle.solid,
      width: 1.8,
    ),
    onPressed: () {},
  )
)

Container(
  width: 100.0,
  height: 50.0,
  margin: EdgeInsets.symmetric(vertical: 3.0),
  child: SizedBox.expand(
    child: OutlineButton(
      child: Text('forgot_password', style: TextStyle(color: Colors.green)),
      borderSide: BorderSide(
        color: Colors.amber,
        style: BorderStyle.solid,
        width: 1.8,
      ),
      onPressed: () {},
    )
  )
)

【讨论】：

【解决方案3】：

这就是我发现对我有用的东西。我使用了OutlinedButton.styleFrom 的fixedSize 属性。

OutlinedButton.icon(
   style: OutlinedButton.styleFrom(
   fixedSize: Size(10, 40),
   alignment: AlignmentDirectional(-1.0, 0),
                      side: BorderSide(
                      width: 1,
                      color: Colors.black38,
                      style: BorderStyle.solid)),
             onPressed: () {},
             label: Text("Login with Facebook"),
             icon: Icon(Icons.facebook),
  ),

【讨论】：

【解决方案4】：

您可以使用Button 样式属性的minimumSize 和maximumSize 属性。这样您就不需要将Button 包装在另一个SizedBox、Container、ButtonTheme 等中。

  OutlinedButton(
    style: OutlinedButton.styleFrom(
      minimumSize: Size.fromHeight(45),
    ),
    child: Text('Close'),
    onPressed: () => Navigator.of(context).pop(),
  )

在这里，我将最小高度设置为 45，在大多数情况下，这将是确切的高度。

当然，您可以在应用的主题中执行此操作，并使其对整个应用有效。

【讨论】：