flutter 如何更改大纲按钮大小？

vh0rcniy 于 2023-02-05 发布在 Flutter

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

这是一个愚蠢的问题，但我是新的Flutter。所以我希望你们能帮助我这个。有没有办法让我改变大小的按钮在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,
            ),
          ),

flutter

来源：https://stackoverflow.com/questions/55989335/how-to-change-outline-button-size

5条答案

按热度按时间

doinxwow1#

您可以使用“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(
          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: () {},
          ),
        ),

赞(0）回复(0）举报 2023-02-05

1cklez4t2#

您可以使用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: () {},
    )
  )
)

赞(0）回复(0）举报 2023-02-05

vfhzx4xs3#

你可以使用Button的style属性的minimumSize和maximumSize属性，这样你就不需要把Button Package 在另一个SizedBox，Container，ButtonTheme中，等等。

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

这里我将最小高度设置为45，在大多数情况下，这将是确切的高度。
当然，您可以在应用的主题中执行此操作，并使其对整个应用有效。

赞(0）回复(0）举报 2023-02-05

7xllpg7q4#

这是我发现的工作对我来说。我已经使用了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),
  ),

赞(0）回复(0）举报 2023-02-05

31moq8wy5#

您可以使用大小小部件。
样式：大纲按钮.样式从（填充：常量边插入。全部（0），形状：圆角矩形边框（边框半径：边界半径，圆形（3）），最小尺寸：尺寸（从高度（100）），

赞(0）回复(0）举报 2023-02-05