Center Column in Flutter

2019-08-18 11:32发布

问题:

I have a column inside a ListTile like this:

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
}

Shouldn't this center the container vertically? I am doing something similar with a column and space around in the title section and it works fine.

回答1:

Can you try wrapping your column inside a container and giving it a fixed width like below:

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


回答2:

You can add it in a Center widget

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'),
              ],
            ),
          )
        ]),
    ),
    )