在Flutter中如何使ListView居中显示

Question

我正在尝试制作一个带有logo的登录/注册界面。我需要它们是响应式的，以适应大多数移动屏幕。为了实现这一点，我使用了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?', () => {})
          ],
        ),
      )
    );
  }

登录界面 注册界面

- Optimist GM

---

也许使用 shrinkWrap: true 可以帮助。 - mirkancal

Answer 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?', () => {})
            ],
          ),
        ),)
    );
  }

- Sachin Soma

Answer 2

无法将ListView添加到屏幕中央，官方文档中也没有相关说明。但是如果您想这样做，则可以参考以下示例：

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

输出：

- Jitesh Mohite

Answer 3

• 在ListView中使用shrinkWrap: true。

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

- Lahiru Kumara