Flutter列表视图生成器列表标题文本

3qpi33ja  于 2023-02-25  发布在  Flutter
关注(0)|答案(2)|浏览(169)

我有一组选项卡,其中一个选项卡中有一个包含listviewBuilder和ListTile的futurebuilder。如何在listTile上方添加标题容器/Sizedbox。我尝试过添加列、SingleChildScrollView、CustomScrollView和slivers,但一直出错

Widget localAttractionsTab() {
    return FutureBuilder(
        future: localAttractions(widget.locationId),
        builder: (BuildContext context, AsyncSnapshot<Amenities> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.error != null) {
            return const Center(child: Text('an error occured!'));
          } else {
            return
             ListView.builder(
                itemCount: snapshot.data!.attraction.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(snapshot.data!.attraction[index].attractionname),
                    //subtitle: Text(el.),
                    onTap: () {
                      //Got To Amenity Details Page
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => AttractionDetailsScreen(
                              attractionID: snapshot.data!.attraction[index].id
                             ),
                        ),
                      );
                    },
                  );
                }
            );
          }
        });
  }
ffx8fchx

ffx8fchx1#

有两种方法可以解决它。
第一个我认为不太清楚的地方是通过添加第一个小部件的位置来改变itemCount。你应该验证第一个索引来呈现你想要的Header:

Widget localAttractionsTab() {
  return FutureBuilder(
      future: localAttractions(widget.locationId),
      builder: (BuildContext context, AsyncSnapshot<Amenities> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        } else if (snapshot.error != null) {
          return const Center(child: Text('an error occured!'));
        } else {
          return ListView.builder(
              itemCount: snapshot.data!.attraction.length + 1,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return Container(child: Text('The header!!'));
                }
                int attractionIndex = index + 1;
                return ListTile(
                  title: Text(snapshot
                      .data!.attraction[attractionIndex].attractionname),
                  //subtitle: Text(el.),
                  onTap: () {
                    //Got To Amenity Details Page
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => AttractionDetailsScreen(
                            attractionID: snapshot.data!.attraction[index].id),
                      ),
                    );
                  },
                );
              });
        }
      });
}

第二种方法是添加一个列及其子列。考虑到你必须定义包含这个列的控件的高度,否则它会抛出一个错误:

Widget localAttractionsTab() {
  return FutureBuilder(
    future: localAttractions(widget.locationId),
    builder: (BuildContext context, AsyncSnapshot<Amenities> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const Center(child: CircularProgressIndicator());
      } else if (snapshot.error != null) {
        return const Center(child: Text('an error occurred!'));
      } else {
        return Column(
          children: <Widget>[
            Container(
              height: 100, // set the height of the header container as needed
              child: Center(
                child: Text(
                  'Header Container', 
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: snapshot.data!.attraction.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(snapshot.data!.attraction[index].attractionname),
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => AttractionDetailsScreen(
                            attractionID: snapshot.data!.attraction[index].id,
                          ),
                        ),
                      );
                    },
                  );
                },
              ),
            ),
          ],
        );
      }
    },
  );
}
g6ll5ycj

g6ll5ycj2#

Widget localAttractionsTab() {
    return FutureBuilder(
        future: localAttractions(widget.locationId),
        builder: (BuildContext context, AsyncSnapshot<Amenities> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.error != null) {
            return const Center(child: Text('an error occured!'));
          } else {
            return
             ListView.builder(
                itemCount: snapshot.data!.attraction.length + 1,
                itemBuilder: (context, index) {
                  if(index == 0){
                    return Container(); // add whatever you want here
                  }
                  else{
                    return ListTile(
                    title: Text(snapshot.data!.attraction[index].attractionname),
                    //subtitle: Text(el.),
                    onTap: () {
                      //Got To Amenity Details Page
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => AttractionDetailsScreen(
                              attractionID: snapshot.data!.attraction[index].id
                             ),
                        ),
                      );
                    },
                  );
                  }
                  
                }
            );
          }
        });
  }

相关问题