Question

我一直试图让按钮出现在中心，但它显示在屏幕底部的按钮。到目前为止，我已经使用 Align() 函数和 Center() 来制作按钮，但它缩小了按钮的大小。这是我当前的代码。

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: Center(
      child: Text("Cooking Measurement Menu"),
    ),
  ),
  body: Container(
    padding: EdgeInsets.all(
        16.0), //pushes the text field by that amount of pixel
    child: Column(
      // display all the component you have written above
      children: <Widget>[
        new Expanded(
          child: new Divider(),
        ),
        new Column(children: [
          new Row(children: [
            //5th row
            new Expanded(
                child: new OutlineButton(
              padding: new EdgeInsets.all(24.0),
              child: new Text(
                "Butter",
                style: TextStyle(
                    fontFamily: 'NotoSans',
                    fontSize: 20.0,
                    fontWeight: FontWeight.w400),
              ),
              onPressed: () {
                Navigator.of(context).push(_goToFirstPage());
              },
            ))
          ]),
        ])
      ],
    ),
  ),
);}

我试图实现的这段代码是让按钮扩大尺寸，每次我想要新按钮时，我只是在新列下添加新行。希望它很清楚。提前致谢。

Answer 1

摆脱扩展

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("Cooking Measurement Menu"),
  ),
  body: Container(
    padding: EdgeInsets.all(
        16.0),
    child:
        Column(children: [
          Divider(),
          Row(children: [
            //5th row
            Expanded(
                child: OutlineButton(
              padding: EdgeInsets.all(24.0),
              child: Text(
                "Butter",
                style: TextStyle(
                    fontFamily: 'NotoSans',
                    fontSize: 20.0,
                    fontWeight: FontWeight.w400),
              ),
              onPressed: () {
                Navigator.of(context).push(_goToFirstPage());
              },
            ))
          ]),
        ])
  ),
);}

如何让按钮出现在屏幕中央

1 个答案: