与 ListView.builder 一起使用的扩展小部件的任何替代方案

Posted 2023-02-23

【中文标题】与 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 和几个 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