FLutter 中可滚动列中的 4 个水平列表视图

Question

我需要 4 个可滚动的水平列表视图，位于可垂直滚动的列中。 我一次又一次地尝试了多种方法，但垂直滚动似乎不起作用。 这是我想要的布局。

Container(
 padding: EdgeInsets.all(20),
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
               Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),
                  Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),Align(
                  alignment: Alignment.bottomLeft,
                  child: Text("Some Text",style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18
                  ),),
                ),
                SizedBox(height:10),
                Container(
                    height: MediaQuery.of(context).size.height/6.8,
                    child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: snapshot.data.length,
                        itemBuilder: (context, index){
                          return widget(
                              );
                       }),
                  ),
);

谁能告诉我我做错了什么？ 我已经被困在这很长一段时间了。 水平列表会滚动，但垂直滚动不起作用。

Answer 1

尝试使用SingleChildScrollView 和Row 而不是ListView

例如，

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("4 Horizontals"),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
              SizedBox(height: 10),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: List.generate(10, (index) => getWid()),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget getWid() {
    return Container(
      color: Colors.pink,
      width: 200,
      height: 200,
      padding: EdgeInsets.all(10),
      margin: EdgeInsets.all(5),
      child: Center(
        child: Text(
          "Hello",
          style: TextStyle(
            color: Colors.white,
            fontSize: 30
          ),
        ),
      ),
    );
  }
}