现在我正在使用一列来显示几个小部件:
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'
正确的实施方法是什么?
尝试将 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'),
],
),
],
),
)
我为此目的创建了一个小部件,下面是相同的代码片段,将
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],
),
),
),
);
});
}
}
您可以使用
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,
],
),
),
],
);