与 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]] - 我的意思是带有两个孩子的 ColumnExpandedListView.builder 孩子和Row 和几个 Buttons 孩子 我发布了一张具有所需结果的图片。我确实尝试过这个-“列 [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

Flutter IndexedWidgetBuilder 与 ListView.builder 与动态项目数?

SetState 不适用于 listview.builder