Question

TL; DR

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

类似于此屏幕截图：

我试图解决的问题：

一开始我有一个Column小部件，有2个孩子。 Column's对齐方式设置为spaceBetween。这就是我想要的，顶部是一个小部件，底部是一个小部件。但是，当我单击输入以添加凭据时，键盘引起了此GitHub issue中描述的溢出问题。因此，要解决此问题，我将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

找到解决方案。您应该使用 minHeight 将 Column 包裹在 IntrinsicHeight 和 ConstrainedBox 中。

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

您可以将ListView的属性反向使用

reverse: true,

然后更改ListView子级的顺序。

Answer 4

您可以在徽标和Align之间插入

    Expanded(child: SizedBox(height: 8)),

Answer 5

最后，我发现了这个问题。使用代码：`

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

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

5 个答案: