如何在ListView中添加Spacer

Question

现在我正在使用一列来显示几个小部件：

Column(
  children: [
    Text('1'),
    Text('2'),
    Spacer(),
    Text('3'),
    Text('4'),
  ],
),

所以屏幕看起来像这样：

---
 1
 2



 3
 4
---

它允许我始终在小部件的顶部对齐

'1'

和

'2'

，在底部对齐

'3'

和

'4'

，无论其大小如何。

---

但是，当小部件变得太小时，它会溢出：

---
 1
 2
 3
---
 4  // <- Overflow

因此，我想用

ListView

达到相同的结果，所以：

• 当小部件足够高时，

  '1'

  '2'

  顶部对齐，

  '3'

  '4'

  底部对齐。
• 当小部件不够高时，

  '2'

  和

  '3'

  之间不再有多余的空间，但用户可以向下滚动。

---

我无法使用

Spacer

ListView

。它给我带来了错误：

Failed assertion: line 1940 pos 12: 'hasSize'

---

正确的实施方法是什么？

Answer 1

尝试将 Text('1') 和 Text('2') 添加到一个列，并将 Text('3') 和 Text('4') 添加到另一个列。然后将这两列添加到展开的父列中，并将父列的主轴对齐方式设置为 spaceBetween。类似下面的代码：

  Expanded(
    ParentColumn(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children:[
        Column1(
          children: [
            Text('1'),
            Text('2'),
           ],
        ),
        Column2(
          children: [
            Text('3'),
            Text('4'),
           ],
        ),
      ],
    ),
  )

Answer 2

我为此目的创建了一个小部件，下面是相同的代码片段，将

SingleChildScrollView

替换为

SpaceBetweenScrollView

，只需使用

child

字段作为顶部部分，使用

footer

字段作为底部部分，就可以开始了。

import 'package:flutter/material.dart';

class SpaceBetweenScrollView extends StatefulWidget {
  const SpaceBetweenScrollView({
    Key? key,
    required this.child,
    required this.footer,
    this.padding = const EdgeInsets.all(16.0),
  }) : super(key: key);

  final Widget child;
  final Widget footer;
  final EdgeInsets padding;

  @override
  State<SpaceBetweenScrollView> createState() => _SpaceBetweenScrollViewState();
}

class _SpaceBetweenScrollViewState extends State<SpaceBetweenScrollView> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return SingleChildScrollView(
        padding: widget.padding,
        keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
        child: Container(
          width: double.infinity,
          constraints: constraints.copyWith(
            minHeight: constraints.maxHeight - (widget.padding.top + widget.padding.bottom),
            maxHeight: double.infinity,
          ),
          child: IntrinsicHeight(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [widget.child, widget.footer],
            ),
          ),
        ),
      );
    });
  }
}

Answer 3

您可以使用

CustomScrollView

完成完全相同的操作

代码示例：

CustomScrollView(
  slivers: [
    SliverToBoxAdapter(
      child: Column(
        children: <Widget>[
          Container() // widget 1,
          Container() // widget 2,
        ],
      ),
    ),
    SliverFillRemaining(
      hasScrollBody: false,
      child: Column(
        children: <Widget>[
          Spacer(), // important
          Container() // widget 3,
          Container() // widget 4,
        ],
      ),
    ),
  ],
);