如何根据 Flutter 中的 ListView 选择显示某些小部件？答案

【问题标题】：How do I display certain widgets based on a ListView selection in Flutter?如何根据 Flutter 中的 ListView 选择显示某些小部件？
【发布时间】：2020-11-14 13:34:42
【问题描述】：

我有显示“今天”、“本周”和“详细信息”的 ListView。下面是一个定制设计的 Widget 的 ListView，它只显示温度、日期/小时和天气图标。我要做的是在默认情况下选择“今天”时显示每小时预测，并在选择“本周”时显示每日预测。在过去的几天里，我似乎遇到了一些困难。我感觉无法从另一个列表视图更改该列表视图的内容。

我尝试将其设置为，当单击“本周”时，每小时信息列表被删除并填充每日信息列表，但这不起作用，也不是一个好的解决方案。我想在每个标题的 onTap 中添加一个方法，例如“详细”方法，它只是将我带到一个新屏幕。

这是预测信息代码行，它可能像今天下午一样变得有点意大利面，所以对此表示歉意：D 我已经把我想要显示的所有信息放在里面，只是为了测试目的。

                      Container(
                        height: 150,
                        margin: EdgeInsets.fromLTRB(30, 0, 0, 30),
                        decoration: BoxDecoration(
                          color: Color(0xFF2F3148),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(30.0),
                            bottomLeft: Radius.circular(30.0),
                          ),
                        ),
                        child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: 1,
                            itemBuilder: (BuildContext context, int index) {
                              return Row(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.stretch,
                                children: [
                                  hourlyWeather[0],
                                  hourlyWeather[1],
                                  hourlyWeather[2],
                                  hourlyWeather[3],
                                  hourlyWeather[4],
                                  hourlyWeather[5],
                                  hourlyWeather[6],
                                  hourlyWeather[7],
                                  hourlyWeather[8],
                                  hourlyWeather[9],
                                  hourlyWeather[10],
                                  hourlyWeather[11],
                                  dailyWeather[0],
                                  dailyWeather[1],
                                  dailyWeather[2],
                                  dailyWeather[3],
                                  dailyWeather[4],
                                  dailyWeather[5],
                                  dailyWeather[6],
                                ],
                              );
                            }),
                      ),

这是上面的代码，我想用它来控制前面代码中显示的内容：

                            child: ListView.builder(
                              scrollDirection: Axis.horizontal,
                              itemCount: weatherInfo.length,
                              itemBuilder: (BuildContext context, int index) {
                                return GestureDetector(

                                  onTap: () {
                                    setState(() {
                                      selectedIndex = index;

                                      //Today
                                      if (selectedIndex == index &&
                                          weatherInfo[selectedIndex] ==
                                              "Today") {
                                        print("Test Today");
                                      }

                                      //This Week
                                      if (selectedIndex == index &&
                                          weatherInfo[selectedIndex] ==
                                              "This Week") {
                                        print("Test");
                                      }

                                      //Detail
                                      if (selectedIndex ==
                                              index && //GOING TO DETAIL SCREEN
                                          weatherInfo[selectedIndex] ==
                                              "Detailed") {
                                        toDetailScreen();
                                        //Sets the Today text to be underlined
                                        selectedIndex = 0;
                                      } //End of Detail IF statement

                                    });
                                  },

非常感谢你们给我指出正确方向的任何建议，这是一个非常漂亮的小应用程序，我希望它像这样发布，而不是添加一个完整的其他每日预测位同时显示所有信息的屏幕。

如果需要，我很乐意澄清更多或添加一些代码。

谢谢！

【问题讨论】：

标签： android flutter listview dart

【解决方案1】：

听起来您希望使用选项卡而不是列表视图来进行顶级选择。 https://flutter.dev/docs/cookbook/design/tabs

另一种选择是使用 StreamBuilder 从数据流构建天气数据的 ListView，并让按钮将数据推送到流中。

【讨论】：