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()
  ],
);

}

我的问题是其中两个按钮使用的字形使它们正好位于中心的右侧。在尝试这种布局之前，我用列构建了凸起的按钮，以便我可以使用 Align 将这些图标向左拉一点，如下所示的按钮之一：

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无济于事，因为它会导致图标与文本重叠，甚至连续重组它们以尝试制作更宽的按钮。我错过了什么？

标签： flutter

尝试使用Transform小部件代替Align并平移 X 轴：

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

flutter - 带有子列的按钮不使用对齐

问题描述

解决方案

推荐阅读