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

我已经知道我无法RaisedButton在Flutter中设置宽度。如果我了解得很好，则应该将RaisedButton放入SizedBox。然后，我将能够设置盒子的宽度或高度。这是对的吗？还有另一种方法吗？

SizedBox在每个按钮周围创建一个按钮有点麻烦，所以我想知道为什么他们选择了这种方式。我很确定他们有这样做的充分理由，但我没有看到。脚手架对于初学者来说很难阅读和构建。

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

作为文档说这里

凸起的按钮的最小尺寸为88.0 x 36.0，可以用ButtonTheme覆盖。

你可以那样做

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

供match_parent您使用

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

对于任何特定的值，您都可以使用

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

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

通常我们有2个用例：

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

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

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

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

我建议使用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,
)

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

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

我最好使与比赛父母成为“筹集”按钮的方法是用Container包装它。下面是示例代码。

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

这段代码将帮助您更好地解决您的问题，因为我们不能直接为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,
    );

只需使用FractionallySizedBox，其中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,
)),

使用Media Query明智地为您的解决方案使用宽度，无论大小屏幕，其宽度都相同

  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。

如果要全局更改所有RaisedButtons的高度和minWidth ，则可以ThemeData在您的内部进行覆盖MaterialApp：

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
       ...
       theme: ThemeData(
       ...
       buttonTheme: ButtonThemeData(
          height: 46,
          minWidth: 100,
       ),
    ));
  }

将RaisedButton包装在Container中，并为Container Widget赋予宽度。

例如

 Container(
 width : 200,
 child : RaisedButton(
         child :YourWidget ,
         onPressed(){}
      ),
    )

您可以创建全局方法，例如在整个应用程序中使用的按钮。它将根据容器内的文本长度调整大小。FittedBox小部件用于根据其内部的子项使小部件适合。

Widget primaryButton(String btnName, {@required Function action}) {
  return FittedBox(
  child: RawMaterialButton(
  fillColor: accentColor,
  splashColor: Colors.black12,
  elevation: 8.0,
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 13.0),
    child: Center(child: Text(btnName, style: TextStyle(fontSize: 18.0))),
  ),
  onPressed: () {
    action();
   },
  ),
 );
}

如果您想要特定宽度和高度的按钮，则可以使用RawMaterialButton的约束属性来提供按钮的最小最大宽度和高度

constraints: BoxConstraints(minHeight: 45.0,maxHeight:60.0,minWidth:20.0,maxWidth:150.0),

您可以按照他们在注释中所说的那样进行操作，也可以节省精力并使用RawMaterialButton。其中包含所有内容，您可以将边框更改为圆形以及其他许多属性。ex shape（增加半径以具有更多的圆形）

shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),//ex add 1000 instead of 25

并且您可以通过使用GestureDetector来使用想要的任何形状作为按钮，GestureDetector是一个小部件，并在child属性下接受另一个小部件。就像这里的另一个例子

GestureDetector(
onTap: () {//handle the press action here }
child:Container(

              height: 80,
              width: 80,
              child:new Card(

                color: Colors.blue,
                shape: new RoundedRectangleBorder(borderRadius: BorderRadius.circular(25)),
                elevation: 0.0,                
              child: Icon(Icons.add,color: Colors.white,),
              ),
              )
)

如果按钮位于Flex小部件（包括Row＆Column）中，则可以使用扩展小部件将其包装以填充可用空间。

就我而言，我使用margin来更改大小：

Container(


     margin: EdgeInsets.all(10),

    // or margin: EdgeInsets.only(left:10, right:10),



        child: RaisedButton(
          padding: EdgeInsets.all(10),

          shape: RoundedRectangleBorder(borderRadius: 
BorderRadius.circular(20)),
          onPressed: () {},
          child: Text("Button"),
        ),
      ),

试试看

Expanded(   
  child: RaisedButton(
    onPressed: _onButtonPressed,
    child: Text('Button1')
  )  
)

如果您不想删除所有按钮主题设置。

ButtonTheme.fromButtonThemeData(
  data: Theme.of(context).buttonTheme.copyWith(
                minWidth: 200.0,
                height: 100.0,,
              )
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

如果您在Column（）中有一个按钮，并且希望该按钮采用最大宽度，请设置：

crossAxisAlignment：CrossAxisAlignment.stretch

在“列”窗口小部件中。现在，此Column（）下的所有内容都将具有最大可用宽度

这对我有用。容器提供高度，而FractionallySizedBox提供RaisedButton的宽度。

Container(
  height: 50.0, //Provides height for the RaisedButton
  child: FractionallySizedBox(
    widthFactor: 0.7, ////Provides 70% width for the RaisedButton
    child: RaisedButton(
      onPressed: () {},
    ),
  ),
),

全角按钮的简洁解决方案：

Row(
  children: [
    Expanded(
      child: ElevatedButton(...),
    ),
  ],
)