web-dev-qa-db-ja.com

リストビュー内でウィジェットを中央に配置する方法

ウィジェットをlistViewの中央に配置するのに苦労しています。

私はこれを好きでしたが、Text('ABC')は垂直方向に中央揃えされていません。どうすればこれを達成できますか？

new Scaffold(
  appBar: new AppBar(),
  body: new ListView(
    padding: const EdgeInsets.all(20.0),
    children: [
      new Center(
        child: new Text('ABC')
      )
    ]
  )
);
flutterflutter-layout
15
Daibaku

垂直方向の中心と水平方向の中心：

Scaffold(
  appBar: new AppBar(),
  body: Center(
    child: new ListView(
      shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: [
          Center(child: new Text('ABC'))
        ]
    ),
  ),
);

垂直中心のみ

Scaffold(
  appBar: new AppBar(),
  body: Center(
    child: new ListView(
      shrinkWrap: true,
        padding: const EdgeInsets.all(20.0),
        children: [
          new Text('ABC')
        ]
    ),
  ),
);
35
anmol.majhail

ウィジェットをコンテナにラップする

Container(alignment: Alignment.center, ...)

または

Container(alignment: Alignment.centerLeft, ...)
11
Andrey Turkovsky

enter image description here

ウィジェットをAlignでラップし、それに応じてalignmentを指定するだけです。

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView( // your ListView
        children: <Widget>[
          Align(
            alignment: Alignment.centerLeft,
            child: _button("Left"),
          ),
          Align(
            alignment: Alignment.center,
            child: _button("Middle"),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: _button("Right"),
          ),
        ],
      ),
    );
  }

  Widget _button(text) => RaisedButton(onPressed: () {}, child: Text(text));
}
1
CopsOnRoad