Flutter 中的 ListView 居中

Posted 2023-02-23

【中文标题】Flutter 中的 ListView 居中

【英文标题】：Centering ListView in Flutter

【发布时间】：2019-03-27 14:08:50

【问题描述】：

我正在尝试制作带有徽标的登录/注册屏幕。我需要它们响应，所以可以适合大多数移动屏幕。为了实现这一点，我使用了 ListView。但是，我只需要将 ListView 在我的布局中居中。有什么建议吗？

这是我的尝试：

@override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Center(
        child: ListView(
          children: <Widget>[
            Image.asset('assets/images/logo.png', scale: 3.0,),
            InputField('enter email address', Icons.email, TextInputType.emailAddress),
            PasswordInputField('enter password', Icons.lock, TextInputType.text),
            RoundBtn('SIGN IN', signIn),
            RoundBtn('SIGN UP', () => ),
            OutlineBtn('FORGOT PASSWORD?', () => )
          ],
        ),
      )
    );
  

Login Screen Registration Screen

【问题讨论】：

也许 shrinkWrap: true，可以提供帮助

【参考方案1】：

使用 SingleChildScrollView 而不是 ListView。 试试这个...

 @override
  Widget build(BuildContext context) 
    return Scaffold(
        body: Center(
          child: SingleChildScrollView(
            child: Column(
            children: <Widget>[
              Image.asset('assets/images/logo.png', scale: 3.0,),
              InputField('enter email address', Icons.email, TextInputType.emailAddress),
              PasswordInputField('enter password', Icons.lock, TextInputType.text),
              RoundBtn('SIGN IN', signIn),
              RoundBtn('SIGN UP', () => ),
              OutlineBtn('FORGOT PASSWORD?', () => )
            ],
          ),
        ),)
    );
  

【参考方案2】：

ListView 不能添加到屏幕的中心。尽管如此，还没有官方文档。但是，如果你想这样做

示例：

Center(
    child: ListView(
      shrinkWrap: true,
      children: <Widget>[
        Center(child: Text('Text1')),
        Center(child: Text('Text2')),
        Center(child: Text('Text3')),
      ],
    ),
  )

输出：

【参考方案3】：

在 ListView 中使用 shrinkWrap: true。

 child: ListView(
      shrinkWrap: true,
      ......
    ),