与 ListView.builder 一起使用的扩展小部件的任何替代方案
Posted
技术标签:
【中文标题】与 ListView.builder 一起使用的扩展小部件的任何替代方案【英文标题】:Any alternative to Expanded widgets using with ListView.builder 【发布时间】:2021-03-10 21:16:53 【问题描述】:我需要设计一个屏幕,根据选择的按钮显示不同的小部件(selectedWidget)。问题是内容是动态的,我必须对所有 API 使用 ListView.builder。并且 ListView.builder 仅在包含列表视图的行包含在扩展小部件中时才有效。我想在我的 ListView 下方有两个按钮,由于 Expanded 小部件覆盖了 ListView 所在的整个 Column,我无法实现。
代码给出了我一直在使用的基本结构。 selectedWidget 是 ListView.builder 小部件,它将根据所选的 FlatButton 进行选择。包含 selectedWidget 的 Column 也具有动态高度。它应该根据列表视图的大小进行调整,所以我不能定义一个固定的高度,甚至不能定义一个 maxHeight。我只能在这里给出 minHeight 。我的 ListView 下方的两个按钮应该在我的 ListView 正下方,并采用 flex 3 的列的宽度。
我也尝试禁用 ListView 的滚动并使用 SingleChildScrollView,但随后我在 ListView 下方的两个按钮也开始滚动,这是我不想要的。我需要它们在屏幕上是静态的,只有 ListView 应该滚动。
我需要解决上述问题。我需要这个扩展小部件的解决方法,它不允许我在列表视图正下方对齐按钮并提供空白。如果 ListView.builder 有任何替代方案,请分享,因为我认为我不能在没有 Expanded 小部件的情况下使用 ListView.builder。我已经用 ListView 和 Expanded 小部件尝试了所有可能的结构。
class MyScreen extends StatefulWidget
@override
_MyScreenState createState() => _MyScreenState();
class _MyScreenState extends State<MyScreen>
@override
Widget build(BuildContext context)
return Column(
children:[
Expanded(
child: Row(
Expanded(flex: 2,
child: Column(
children: [
FlatButton(),
FlatButton(),
FlatButton(),
FlatButton(),
]
)
),
Expanded(flex: 3,
child: Column(
children: [
Expanded(selectedWidget),
Row(children: [FlatButton(), FlatButton()], )
]
)
),
)
)
],);
【问题讨论】:
那么为什么你的Column
只有一个Expanded
孩子?也许发布具有所需结果的图像?
我只需要右栏的一个孩子。无论选择哪个按钮,都应该显示该列表视图。
带一个孩子的Column
是没用的,也许发布一张具有所需结果的图片?如果您只想要一个列表视图和下面的几个按钮,只需使用 column[expanded>listview.builder, row[button1, button2, etc]] - 我的意思是带有两个孩子的 Column
:Expanded
和 ListView.builder
孩子和Row
和几个 Button
s 孩子
我发布了一张具有所需结果的图片。我确实尝试过这个-“列 [expanded>listview.builder, row[button1, button2, etc]]”。但是,如果我不将父行包装在扩展小部件中,该小部件在列表视图下方提供空白并且按钮位于屏幕底部,则列表视图不起作用,这是我不想要的。
并且列表视图的高度必须与左侧的那 4 个按钮高度匹配?
【参考方案1】:
也许你可以在 ListView 中使用Flexible
并设置shrinkWrap: true,
。之后以下 2 个按钮可能不再需要 Expand
小部件。
child: Column(
children: [
Flexible(
child: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) => Text(index.toString()),
itemCount: 6,
),
),
Row(
... // 2 Buttons
【讨论】:
以上是关于与 ListView.builder 一起使用的扩展小部件的任何替代方案的主要内容,如果未能解决你的问题,请参考以下文章
如何在 ListView.builder 中使用 RadioListTile?
为啥所有 Slider 小部件在 ListView.builder 中一起移动?
在 Flutter 中创建一个双向无限 ListView.builder