如何将 ListView 中的所有小部件垂直居中？

Question

我有一个带有 ListView 的主屏幕：截图

我决定使用 ListView，因为它每次打开键盘时都会导致屏幕溢出错误。

这是我的代码：

ListView(children: [
  Align(
    alignment: Alignment.topCenter,
    child: Padding(
      padding: const EdgeInsets.only(top: 46.0, bottom: 8),
      child: ClipRect(
        child: Image.asset(
          'images/icon.png',
          scale: 2,
        ),
      ),
    ),
  ),
  Align(
    alignment: Alignment.center,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      child: TextField(
        controller: _word,
        textAlign: TextAlign.center,
        decoration: InputDecoration(
          suffixIcon: IconButton(
            icon: Icon(Icons.close),
            onPressed: () {
              _word.text = '';
            },
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          filled: true,
          fillColor: Colors.lightGreen[200],
          hintStyle: TextStyle(color: Colors.green),
          hintText: 'Enter a word',
        ),
      ),
    ),
  ),
  Align(
    alignment: Alignment.bottomCenter,
    child: Padding(
      padding: const EdgeInsets.only(top: 16, bottom: 12),
      child: ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: 65, height: 65),
        child: ElevatedButton(
            style: ButtonStyle(
                shape: MaterialStateProperty.all<CircleBorder>(CircleBorder())),
            child: Icon(Icons.search),
            onPressed: () async {
              detectNetStatus(context);
              String word = _word.text;
              _word.text = '';
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return word == '' ? RandomResults() : Results(word);
              }));
            }),
      ),
    ),
  ),
]),

我还在所有三个屏幕小部件上使用了Align小部件。 但似乎使用Align实际上对三个小部件的放置没有影响。

我想以三个小部件上方和下方的空间相等的方式放置三个小部件（或者换句话说，我想将它们分组并放置在垂直居中对齐方式中）。

Answer 1

此代码将帮助您获得概念。 如果你需要layoutSize包裹Stack与LayoutoutBuilder得到constrains 。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: Padding(
              padding: const EdgeInsets.only(top: 46.0, bottom: 8),
              child: ClipRect(
                child: Image.asset(
                  // 'images/icon.png',
                  "assets/me.jpg",
                  scale: 2,
                ),
              ),
            ),
          ),
          Align(
            /// change this value according to your desire
            alignment: Alignment(0, .2),
            child: ListView(
              shrinkWrap: true,
              children: [
                Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 24.0, vertical: 12.0),
                  child: TextField(
                    // controller: _word,F
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                        icon: Icon(Icons.close),
                        onPressed: () {
                          // _word.text = '';
                        },
                      ),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(10.0),
                      ),
                      filled: true,
                      fillColor: Colors.lightGreen[200],
                      hintStyle: TextStyle(color: Colors.green),
                      hintText: 'Enter a word',
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(top: 16, bottom: 12),
                  child: ConstrainedBox(
                    constraints: BoxConstraints.tightFor(width: 65, height: 65),
                    child: ElevatedButton(
                        style: ButtonStyle(
                            shape: MaterialStateProperty.all<CircleBorder>(
                                CircleBorder())),
                        child: Icon(Icons.search),
                        onPressed: () async {
                          // detectNetStatus(context);
                          // String word = _word.text;
                          // _word.text = '';
                          // Navigator.push(context,
                          //     MaterialPageRoute(builder: (context) {
                          //   return word == '' ? RandomResults() : Results(word);
                          // }));
                        }),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

Answer 2

这是您的代码的解决方案，用于使用 Flex 小部件将小部件与居中对齐。

Widget build(BuildContext context) {
   return Scaffold(
  body: LayoutBuilder(
  builder: (context, viewportConstraints) {
    return SingleChildScrollView(
      child: ConstrainedBox(
        constraints: viewportConstraints.copyWith(
          minHeight: viewportConstraints.maxHeight,
          maxHeight: double.infinity,
        ),
        child: Flex(
          direction: Axis.vertical,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ClipRect(
              child: Image.asset(
                "images/icon.png",
                scale: 2,
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(
                  horizontal: 10.0, vertical: 30.0),
              child: TextField(
                controller: _word,
                textAlign: TextAlign.center,
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    color: Colors.green,
                    icon: Icon(Icons.close),
                    onPressed: () {
                      _word.text = '';
                    },
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  filled: true,
                  fillColor: Colors.yellow[50],
                  hintStyle: TextStyle(color: Colors.green),
                  hintText: 'Enter a word',
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 10.0),
              child: ConstrainedBox(
                constraints: BoxConstraints.tightFor(width: 65, height: 65),
                child: ElevatedButton(
                    style: ButtonStyle(
                        shape: MaterialStateProperty.all<CircleBorder>(
                            CircleBorder())),
                    child: Icon(Icons.search),
                    onPressed: () async {
                      detectNetStatus(context);
                      String word = _word.text;
                      _word.text = '';
                      Navigator.push(context,
                          MaterialPageRoute(builder: (context) {
                        return word == '' ? RandomResults() : Results(word);
                      }));
                    }),
              ),
            ),
          ],
        ),
      ),
    );
  },
),    
  );
}