我发现无法在扑动中设置提升按钮的宽度。如果我已经很好地理解了,我应该把提升按钮放入大小框中。然后,我将能够设置框的宽度或高度。正确吗?还有别的办法吗?

在每个按钮周围创建一个大小框有点乏味,所以我想知道为什么他们选择这样做。我很确定他们这么做有一个很好的理由,但我不这么认为。 对于初学者来说,脚手架很难阅读和构建。

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

当前回答

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

其他回答

我们使用Row或Column, Expanded, Container和元素来使用例子RaisedButton

 body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10.0),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2, // we define the width of the button
                      child: Container(
                        // height: 50, we define the height of the button
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: RaisedButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            textColor: Colors.white,
                            color: Colors.blue,
                            onPressed: () {
                              // Method to execute
                            },
                            child: Text('Copy'),
                          ),
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 2, // we define the width of the button
                      child: Container(
                        // height: 50, we define the height of the button
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10.0),
                          child: RaisedButton(
                            materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                            textColor: Colors.white,
                            color: Colors.green,
                            onPressed: () {
                              // Method to execute
                            },
                            child: Text('Paste'),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),

在我的例子中,我使用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"),
        ),
      ),

全宽按钮的简短而甜蜜的解决方案:

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

如果你在Column()中有一个按钮,并希望该按钮具有最大宽度,设置:

crossAxisAlignment: CrossAxisAlignment.stretch

在Column小部件中。现在这个Column()下的所有内容都将具有最大可用宽度

已批准的答案现在已弃用,请参阅文档。

要更新从主题到所有按钮的代码大小,您可以这样做:

ThemeData(
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        fixedSize:MaterialStateProperty.all<Size?>(Size(200.0, 75.0)),
        textStyle:MaterialStateProperty.all<TextStyle?>(TextStyle(fontSize:30))),
    ),
  )