如何在 flutter 中使用 tabbar 时滚动单个页面？

Question

当我们在 flutter 中使用 Tabbar 时，我想在 flutter 中制作 scrollable 页面。我试过这段代码，但这不起作用。在这段代码中，我的整个 listview 我都看不到。如何在使用 tabbar.

时显示整个 listview 项目

那么，我该如何解决这个问题。

Widget _listofitem() {
    return Container(
      margin: EdgeInsets.only(top: 10.0),
      padding: EdgeInsets.all(8.0),
      child: ListView.builder(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: categoryDetail.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            padding: EdgeInsets.all(8.0),
            width: MediaQuery.of(context).size.width,
            height: 100.0,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                color: Colors.cyanAccent),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: SizedBox(
                    height: 20,
                    width: 20,
                    // child: NetworkImage(categoryDetail[index]),
                  ),
                ),
                SizedBox(
                  height: 10.0,
                ),
                Text(categoryDetail[index]['category_name'].toString()),
              ],
            ),
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          automaticallyImplyLeading: false,
          title: Text(
            'Invitation Card Application',
            style: TextStyle(color: Colors.white),
          ),
          backgroundColor: Colors.cyan,
          centerTitle: true,
          bottom: TabBar(
            tabs: myTabs,
            controller: _tabController,
          )
        ),
        body: TabBarView(
          controller: _tabController,
          children: myTabs.map((Tab tab) {
            return Center(
              child: Stack(
                children: <Widget>[
                  _listofitem(),
                  // _ofitem()
                ],
              ),
            );
          }).toList(), 
        ));
  }

我想在单击单个选项卡时更改页面，并在该单个页面中滚动。所以我显示整个页面。有什么解决办法。

Answer 1

在 ListView.builder() 小部件中，您设置了属性、

shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),

这会阻止列表视图上的滚动。如果要将列表视图包装在具有上述属性的容器内，则将容器包装在 SingleChildScrollView 小部件中。

SingleChildScrollView(
      child: Container(), 
);

这样就可以实现滚动效果，可以看到所有的列表视图项

如何在 flutter 中使用 tabbar 时滚动单个页面？

How to scroll individual page when we use tabbar in flutter?

dart

flutter

flutter-test

flutter-dependencies

flutter-layout