[在Flutter中使用标签栏时如何滚动单个页面？

Question

我想在颤动中使用scrollable时在flutter中制作Tabbar页面。我试过了这段代码，但这不起作用。在这段代码中，我看不到整个listview。如何在使用listview时显示整个tabbar项目。

所以，我该如何解决这个问题。

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(), 
);

这样，您可以具有滚动效果，并且可以看到所有列表视图项目