Как центрировать ListView?

Question

У меня есть столбец, но проблема в том, что при слишком малой высоте экрана возникает ошибка:

Дно переполнено 5,0 пикселями

Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        CenterBoxText(),
                        SizedBox(height: 1),
                        RaisedButton(
                          child: Text(‘Example’),
                        ),
                      ],
                    ),

Я пытаюсь заменить Column на ListView, и эта ошибка останова. Но теперь на большом экране виджет отображается сверху, а не в центре. Потому что ListView не имеют mainAxisAlignment: MainAxisAlignment.center.

Как решить?

Спасибо!

Answer 1

Попробуйте обернуть ваш Column виджет SingleChildScrollView виджетом, он предоставит возможность прокрутки.Как это:

 SingleChildScrollView(
              child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: <Widget>[
                         CenterBoxText(),
                         SizedBox(height: 1),
                         RaisedButton(
                           child: Text(‘Example’),
                         ),
                       ],
                     ),
                    ),

Answer 2

Если у вас есть проблемы с колонкой, создающей переполнение, то это, вероятно, переполнение по вертикальной оси.ListView позволяет прокручивать по вертикальной оси и позволяет пикселям переполнения находиться ниже экрана просмотра.Вот почему ListView работает для вас, а Column - нет.Поскольку вам нужен столбец, вам просто нужно обернуть столбец в расширяемый, чтобы столбец помещался в доступное пространство.

Вот полный пример:

import 'package:flutter/material.dart';

class ColumnTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
              child: Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
                //CenterBoxText(),
                SizedBox(height: 1),
                RaisedButton(
                  child: Text('example'),
                ),
            ],
          ),
              ))
        ],
      ),
    );
  }
}