如何在 Flutter 中的 ListView 顶部添加标题？答案

【问题标题】：How do I add a title on top of a ListView in Flutter?如何在 Flutter 中的 ListView 顶部添加标题？
【发布时间】：2020-03-07 10:03:30
【问题描述】：

我有一个在容器内滚动并有 7 个图块的列表视图。我想在列表视图顶部添加标题“设置”，即使列表视图滚动，该标题也必须保留在那里。

当我添加它时，列表正在滚动，但在标题后面。这使得列表视图项目很难被阅读。有没有更好的方法来添加这个标题？

这是我在带有圆边的容器内的 listView 的代码：

  Padding(
            padding: const EdgeInsets.only(top: 408.0, left: 8, right: 8),
            child: Container(
              width: double.infinity,
              height: 590,
              margin: EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(34)),
              ),
              child: Stack(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 12.0, top: 10),
                    child: ListView.builder(
                      primary: false,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: 7,
                      itemBuilder: (BuildContext context, int index) {
                        IconData icon;

                        if (index == 0) {
                          icon = Entypo.phone;
                        } else if (index == 1) {
                          icon = Entypo.help;
                        } else if (index == 2) {
                          icon = Entypo.email;
                        } else if (index == 3) {
                          icon = Entypo.star;
                        } else if (index == 4) {
                          icon = Entypo.share;
                        } else if (index == 5) {
                          icon = Entypo.info;
                        } else if (index == 6) {
                          icon = Entypo.log_out;
                        } else if (index == 7) {
                          icon = Entypo.log_out;
                        }

                        return new GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () => {_onTileClicked(index)},
                          child: SettingsCard(
                            title: settingsAry[index]['title'],
                            description: settingsAry[index]['description'],
                            index: index,
                            iconData: icon,
                          ),
                        );
                      },
                    ),
                  ),
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 10.0, left: 20),
                        child: Text(
                          'Settings',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 23),
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
          )

【问题讨论】：

使用 Positioned 与堆栈对齐

标签： listview flutter dart

【解决方案1】：

您需要将它们放在一列中：首先是标题，然后是 Expanded 和 ListView 作为子级。应该这样做：

  Padding(
            padding: const EdgeInsets.only(top: 408.0, left: 8, right: 8),
            child: Container(
              width: double.infinity,
              height: 590,
              margin: EdgeInsets.only(top: 15),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(top: Radius.circular(34)),
              ),
              child: Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(top: 10.0, left: 20),
                        child: Text(
                          'Settings',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, fontSize: 23),
                        ),
                      )
                    ],
                  )
                  Expanded(
                    child: ListView.builder(
                      primary: false,
                      scrollDirection: Axis.vertical,
                      shrinkWrap: true,
                      itemCount: 7,
                      itemBuilder: (BuildContext context, int index) {
                        IconData icon;

                        if (index == 0) {
                          icon = Entypo.phone;
                        } else if (index == 1) {
                          icon = Entypo.help;
                        } else if (index == 2) {
                          icon = Entypo.email;
                        } else if (index == 3) {
                          icon = Entypo.star;
                        } else if (index == 4) {
                          icon = Entypo.share;
                        } else if (index == 5) {
                          icon = Entypo.info;
                        } else if (index == 6) {
                          icon = Entypo.log_out;
                        } else if (index == 7) {
                          icon = Entypo.log_out;
                        }

                        return new GestureDetector(
                          behavior: HitTestBehavior.translucent,
                          onTap: () => {_onTileClicked(index)},
                          child: SettingsCard(
                            title: settingsAry[index]['title'],
                            description: settingsAry[index]['description'],
                            index: index,
                            iconData: icon,
                          ),
                        );
                      },
                    ),
                  ),

                ],
              ),
            ),
          )

我用Expanded 替换了您的Padding，因为这样做更容易。如果您愿意，可以将Padding 保留在Expanded 中。

【讨论】：