将 ListView 的子项与顶部和底部对齐

Question

TL; 博士

是否可以ListView's像Column's spaceBetween对齐一样对齐孩子？

就像这个截图：

我试图解决的问题：

一开始我有一个Column有 2 个孩子的小部件。该Column's对齐设置为spaceBetween。这正是我想要的，一个在顶部，一个在底部。但是当我点击输入以添加凭据时，键盘导致了此 GitHub问题中描述的溢出问题。所以为了修复它，我Column用ListView. 但是现在我的孩子小部件被卡在屏幕顶部。

我的完整LoginScreen代码：

import 'package:flutter/material.dart';

import '../widgets/button.dart';
import '../widgets/input.dart';
import '../widgets/logo.dart';

class LoginScreen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Background(),
          Wrapper(),
        ],
      ),
    );
  }
}

class Background extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
          colors: [
            Color(0xfff6f6f6),
            Colors.white,
          ],
        ),
      ),
    );
  }
}

class Wrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Logo(LogoColor.dummy_black),
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: BottomPart(),
          ),
        ),
      ],
    );
  }
}

class BottomPart extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Input('User name'),
        Input('Password'),
        Button(
          'Log in',
          onPressed,
        ),
      ],
    );
  }

  void onPressed() {}
}

Answer 1

寻找解决方案。您应该将 Column 包装在 IntrinsicHeight 和 ConstrainedBox 中，并使用 minHeight。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: IntrinsicHeight(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(context).size.height,
          ),
          child: Column(
            children: [
              Container(
                height: 100,
                width: double.infinity,
                color: Colors.yellow,
                child: Text('1', style: TextStyle(color: Colors.black)),
              ),
              Spacer(),
              Container(
                height: 100,
                width: double.infinity,
                color: Colors.red,
                child: Text('2', style: TextStyle(color: Colors.black)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

尝试SizedBox(height:50.0) // or any other value 在黑白Logo小部件和Align（底部）中使用。

 return ListView(
      children: <Widget>[
        Logo(LogoColor.dummy_black),
        SizedBox(height: MediaQuery.of(context).size.height/ 3),// you will get value which is 1/3rd part of height of your device screen
        Align(
          alignment: Alignment.bottomCenter,
          child: Padding(
            padding: const EdgeInsets.all(20),
            child: BottomPart(),
          ),
        ),
      ],
    );

Answer 3

最后我找到了这个问题的解决方案。使用代码：`

Align(
    alignment: Alignment.bottomCenter,
    child: ListView(
      shrinkWrap: true,
      children: <Widget>[
        // Your Widget Here
      ],
    ),
  ),

Answer 4

您可以使用 ListView 的属性反向

reverse: true,

然后更改 ListView 子级的顺序。