Flutter 中的中心柱答案

【问题标题】：Center Column in FlutterFlutter 中的中心柱
【发布时间】：2019-12-08 21:38:33
【问题描述】：

我在 ListTile 中有一个列，如下所示：

return ListTile(
    //contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
    leading: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(right: 12.0),
            decoration: BoxDecoration(
                border: Border(
                    right: BorderSide(
              width: 1.0,
            ))),
            child: Column(
              children: <Widget>[
                Text('Hello'),
              ],
            ),
              )
            ]),

...more code
}

这不应该使容器垂直居中吗？我在标题部分的列和空格周围做类似的事情，它工作正常。

【问题讨论】：

看来ListTile有自己的限制。也许创建自定义小部件而不是 ListTile 会更好
我试过你的代码，容器在列中垂直居中。这不是你要的吗？您可能需要显示更多代码，因为到目前为止您显示的代码没有问题。

标签： flutter dart flutter-layout

【解决方案1】：

您可以尝试将您的列包装在一个容器中并给它一个固定的宽度，如下所示：

leading: Container(
  width: 100,
  child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[]),
);

【讨论】：

【解决方案2】：

您可以将其添加到中心小部件中

ListTile(
//contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0),
    leading: Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(right: 12.0),
            decoration: BoxDecoration(
                border: Border(
                    right: BorderSide(
                      width: 1.0,
                    ))),
            child: Column(
              children: <Widget>[
                Text('Hello'),
              ],
            ),
          )
        ]),
    ),
    )

【讨论】：