Question

我正在尝试将flutter应用程序中的一些按钮布局到屏幕底部，如下所示：

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
    centerTitle: true,
  ),
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: AssetImage('images/foo.jpeg'),
          fit: BoxFit.cover),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: 10),
          child: _buttonsOne(),
        ),
        Expanded(
          child: Text(''),
        ),
        Padding(
          padding: EdgeInsets.only(bottom: 10),
          child: _buttonsTwo(),
        ),
      ],
    ),
  ),
);

因此已设置了计数器按钮：

Widget _buttonsTwo() {
return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    _oneButton(),
    _twoButton(),
    _threeButton(),
    _fourButton()
  ],
);

}

我的问题是两个按钮使用的字形使它们恰好位于中心位置。在尝试进行这种布局之前，我先对带有列的凸起按钮进行了结构设计，以便可以使用“对齐”将这些图标向左拉一点，如下面的其中一个按钮所示：

Widget _threeButton() {
return RaisedButton(
  onPressed: () {},
  elevation: 10,
  color: Colors.red,
  textColor: Colors.white,
  padding: EdgeInsets.all(10.0),
  child: Column(
    children: <Widget>[
      Align(
        alignment: Alignment(-0.4, 0),
        child: Icon(
          Class.icon_name,
          size: 30,
        ),
      ),
      Text(
        _fooCount.toString(),
        style: TextStyle(fontSize: 25),
      )
    ],
  ),
);

}

这是我得到的结果：

如您所见，两个最右边的按钮的图标仍然在右边。我尝试使用RaisedButton.icon无济于事，因为它会导致图标与文本重叠，甚至可以连续重组它们以尝试制作更宽的按钮。我想念什么？

Answer 1

尝试使用Transform小部件而不是Align并平移X轴：

    Transform(
                  transform: Matrix4.identity()..translate(-7.0),
                  child: Icon(
                    FiveRingsDB.conflict_political,
                    size: 30,
                  ),
                ),
                Text(
                  _militaryCount.toString(),
                  style: TextStyle(fontSize: 25),
                )

带列的按钮，用于不使用对齐方式的孩子

1 个答案: