我有一个索引栈。第一个子小部件具有相对于第二个子小部件一半的内容,但是第一个子小部件的高度与第二个子小部件相同。由于设计原因,这似乎是预期的结果,但很烦人,因为当我在第一个子小部件上滚动时,底部会多出一堆空白。我该如何解决这个问题?
Flutter团队为什么要这样设计呢?为什么不按照小部件的实际高度赋予小部件子项高度,而是按照最大子项的高度呢?
Flutter团队为什么要这样设计呢?为什么不按照小部件的实际高度赋予小部件子项高度,而是按照最大子项的高度呢?
这个解决方案保留了状态,这是IndexedStack的一个关键特性。大多数已发布的解决方案在索引更改时丢弃状态,而我需要保留状态。
如果处于活动状态,则Widget高度没有限制,并且如果处于非活动状态,则受到1像素SizedBox的约束。这使得活动的Widget最大化,因此您的Widget以其个人大小呈现,而不会添加空间。
IndexedStack(
index: selectedIndex,
children: [
SizedBox(
height: selectedIndex == 0 ? null : 1,
child: Widget1()),
SizedBox(
height: selectedIndex == 1 ? null : 1,
child: Widget2()),
SizedBox(
height: selectedIndex == 2 ? null : 1,
child: Widget3())
],
);
IndexedStack(
index: selectedIndex,
children: [
Visibility(
visible: selectedIndex == 0,
child: Container(
height: 300,
),
Visibility(
visible: selectedIndex == 1,
child: Container(
height: 100,
)
]
)
Widget _buildPage2() {
if(index != 1) { // Empty container
return Container();
}
return Column( // Actual Widget which has a different height
children: <Widget>[]
);
}
我仍然没有弄清楚如何让controller.animateTo
起作用。
编辑
我通过触发Future.delayed
事件使controller.animateTo
工作。
更好的方法是使用WidgetBindings
,如其他帖子中所解释的。
我遇到了同样的问题,并找到了这个解决方法。
class CustomIndexedStack extends StatelessWidget {
const CustomIndexedStack(
{super.key, required this.index, required this.children});
final List<Widget> children;
final int index;
@override
Widget build(BuildContext context) {
return Stack(
children: children
.mapIndexed(
(widget, i) => Offstage(offstage: index != i, child: widget))
.toList(),
);
}
}
extension IndexedIterable<E> on Iterable<E> {
Iterable<T> mapIndexed<T>(T Function(E e, int i) f) {
var i = 0;
return map((e) => f(e, i++));
}
}