如何在Flutter中设置RaisedButton的宽度？

Question

我已经看到我无法设置RaisedButtonFlutter中的a的宽度.如果我已经很好理解,我应该把它RaisedButton变成一个SizedBox.然后我将能够设置盒子的宽度或高度.这是对的吗？还有另一种方法吗？

SizedBox围绕每个按钮创建一个有点单调乏味,所以我想知道为什么他们选择这样做.我很确定他们有充分的理由这样做,但我没有看到它.脚手架很难阅读和为初学者建造.

new SizedBox(
  width: 200.0,
  height: 100.0,
  child: new RaisedButton(
    child: new Text('Blabla blablablablablablabla bla bla bla'),
    onPressed: _onButtonPressed,
  ),
),

Answer 1

作为文档说这里

凸起按钮的最小尺寸为88.0×36.0,可以用ButtonTheme覆盖.

你可以这样做

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

Answer 2

对于match_parent您可以使用

SizedBox(
  width: double.infinity, // match_parent
  child: RaisedButton(...)
)

Answer 3

那是因为颤动与大小无关。这是关于约束的。

通常我们有2个用例：

• 小部件的子级定义约束。父项本身的大小基于该信息。ex：，Padding接受子约束并增加它。
• 父母对其子女实施约束。例如：SizedBox，但也Column处于拉伸模式下，...

RaisedButton是第一种情况。这意味着它是定义其自己的高度/宽度的按钮。并且，根据材料规则，凸起的按钮尺寸是固定的。

您不需要这种行为，因此可以使用第二种类型的小部件来覆盖按钮约束。

无论如何，如果您非常需要这样做，可以考虑创建一个新的小部件来完成您的工作。或使用MaterialButton具有height属性的。

Answer 4

您需要使用扩展小部件。但是，如果您的按钮位于一列上，则扩展小部件会填充该列的其余部分。因此，您需要将 Expanded Widget 括在一行中。

Row(children: <Widget>[
Expanded(
  flex: 1,
  child: RaisedButton(
    child: Text("Your Text"),
      onPressed: _submitForm,
    ),
  ),),])

Answer 5

我们还可以使用ElevatedButton Widget，它有fixedSize 属性。最新的颤振版本

 ElevatedButton(
          onPressed: () {},
          style: ElevatedButton.styleFrom( 
              fixedSize: Size(120, 34), // specify width, height
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(
                20,
              ))),
          child: Text("Search"),
        )

预览

Answer 6

我使用匹配父级制作 Raise 按钮​​的首选方法是用 Container 包装它。下面是示例代码。

Container(
          width: double.infinity,
          child: RaisedButton(
                 onPressed: () {},
                 color: Colors.deepPurpleAccent[100],
                 child: Text(
                        "Continue",
                        style: TextStyle(color: Colors.white),
                      ),
                    ),
                  )

Answer 7

我建议使用MaterialButton，比您可以这样：

new MaterialButton( 
 height: 40.0, 
 minWidth: 70.0, 
 color: Theme.of(context).primaryColor, 
 textColor: Colors.white, 
 child: new Text("push"), 
 onPressed: () => {}, 
 splashColor: Colors.redAccent,
)

Answer 8

这段代码将帮助您更好地解决您的问题，因为我们不能直接为 RaisedButton 指定宽度，我们可以为其子项指定宽度

double width = MediaQuery.of(context).size.width;
var maxWidthChild = SizedBox(
            width: width,
            child: Text(
              StringConfig.acceptButton,
              textAlign: TextAlign.center,
            ));

RaisedButton(
        child: maxWidthChild,
        onPressed: (){},
        color: Colors.white,
    );

Answer 9

使用媒体查询为您的解决方案明智地使用宽度，该解决方案将在小屏幕和大屏幕上运行相同

  Container(
            width: MediaQuery.of(context).size.width * 0.5, // Will take 50% of screen space
            child: RaisedButton(
              child: Text('Go to screen two'),
              onPressed: () => null
            ),
          )

您也可以应用类似的解决方案SizeBox。

Answer 10

只需使用FractionallySizedBox, where widthFactor&heightFactor 定义应用程序/父级大小的百分比。

FractionallySizedBox(
widthFactor: 0.8,   //means 80% of app width
child: RaisedButton(
  onPressed: () {},
  child: Text(
    "Your Text",
    style: TextStyle(color: Colors.white),
  ),
  color: Colors.red,
)),

Answer 11

新按钮TextButton、ElevatedButton、OutlinedButton 等将以不同的方式进行更改。

我发现的一种方法来自这篇文章：您需要“收紧”按钮周围的约束框。

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 300, height: 200),
            child: ElevatedButton(
              child: Text('300 x 200'),
              onPressed: () {},
            ),
          ),
        ));
  }

Answer 12

随着Flutter 2.0 RaisedButton被弃用并由ElevatedButton.

考虑到这一点，更简洁的方法ElevatedButton是minimumSize为ElevatedButton小部件提供自定义大小。

输出

完整代码

          ElevatedButton(
            style: ElevatedButton.styleFrom(
              primary: Colors.green,
              onPrimary: Colors.white,
              shadowColor: Colors.greenAccent,
              elevation: 3,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(32.0)),
              minimumSize: Size(100, 40), //////// HERE
            ),
            onPressed: () {},
            child: Text('Hey bro'),
          )

注：也请记住，同样的方法可以在新部件等一起使用TextButton，并OutlinedButton使用TextButton.styleFrom(minimumSize: Size(100, 40))和OutlinedButton.styleFrom(minimumSize: Size(100, 40))分别。