如何在 SingleChildScrollview 内制作水平滚动 ListView答案

【问题标题】：How to make Horizontal Scroll ListView inside the SingleChildScroll如何在 SingleChildScrollview 内制作水平滚动 ListView
【发布时间】：2020-02-21 10:40:17
【问题描述】：

我想创建这样的布局， Image

我想创建一个可以垂直滚动的颤动应用程序，并且应用程序的某些内容应该水平滚动，如图所示。我使用 ListView 在 SingleChildScrollView 内水平滚动，但它不起作用。它隐藏了内容水平的listView内容和ListView下面的内容。

那么如何制作这个布局

我使用的代码，

body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 10),
              child: CustomizedAppBar(),
            ),
            SizedBox(
              height: 30.0,
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10,bottom: 5),
              child: Text(
                'Hello Jessica.',
                style: kArtistNamePlayScreen,
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 10,bottom: 40),
              child: Text(
                'Recommendeddd',
                style: kSongNamePlayScreen,
              ),
            ),
            //TODO Insert Carousel Here
            ListView(
              children: <Widget>[
                Container(
                  height: 150,
                  width: 230,
                  decoration: BoxDecoration(
                    color: Colors.grey[100],
                    borderRadius: BorderRadius.circular(20.0),
                    image: DecorationImage(
                      image: AssetImage('images/Panini_l.jpg'),
                      fit: BoxFit.cover,
                    ),
                    boxShadow: [
                      new BoxShadow(
                        color: Colors.grey,
                        offset: Offset(1.5,1.5),
                        blurRadius: 3,
                      ),
                    ],
                  ),
                ),
              ],
            ),
            Text(
              'Popular artists',
              style: kSongNamePlayScreen,
            ),
            Container(
              child: Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Container(
                      width: 60,
                      height: 75,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.all(Radius.circular(8)),
                        image: DecorationImage(
                          image: AssetImage('images/Panini_l.jpg'),
                          fit: BoxFit.cover,
                        )
                      ),
                    ),
                  )
                ],
              ),
            ),
            SongList(
              songListSongName: 'Beautiful People',
              songListArtistName: 'Ed Sheeran',
              songListAvatarImage: AssetImage('images/beautiful_people_l.jpg'),
              heartClick: (){},
            ),
            SongList(
              songListSongName: 'Panini',
              songListArtistName: 'Lil Nas X',
              songListAvatarImage: AssetImage('images/Panini_l.jpg'),
              heartClick: (){},
            ),
            SongList(
              songListSongName: 'Do You Sleep',
              songListArtistName: 'Sam Samith',
              songListAvatarImage: AssetImage('images/Do_you_sleep_l.jpg'),
              heartClick: (){},
            ),
            SongList(
              songListSongName: 'Bad Guys',
              songListArtistName: 'Billie Eilish',
              songListAvatarImage: AssetImage('images/Bad_guys_l.jpg'),
              heartClick: (){},
            )
          ],
        ),
      )

【问题讨论】：

标签： android flutter flutter-layout

【解决方案1】：

您可以使用带有水平滚动条的ListView，它必须包裹在具有特定高度的Container 或SizedBox 中。

使用ListView.builder 可能更有效，这里有一个简单的例子：

final _items = List.generate(20, (e) => e);

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Text("A"),
          SizedBox(
            height: 100.0,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  print('$index');
                  return SizedBox(
                    width: 150.0,
                    child: Center(child: Text('${_items[index]}')),
                  );
                }),
          ),
          Text("B"),
        ],
      ),
    ),
  );
}

您可以在控制台中看到打印，这表明这些项目仅在它们滚动到屏幕上时才会创建。

【讨论】：

【解决方案2】：

您可以将SingleChildScrollView 与Row 一起用作子级，而不是ListView。然后给SingleChildScrollViewscrollDirection: Axis.horizontal代码：

//TODO Insert Carousel Here
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          children: <Widget>[
            Container(
              height: 150,
              width: 230,
              decoration: BoxDecoration(
                color: Colors.grey[100],
                borderRadius: BorderRadius.circular(20.0),
                image: DecorationImage(
                  image: AssetImage('images/Panini_l.jpg'),
                  fit: BoxFit.cover,
                ),
                boxShadow: [
                  new BoxShadow(
                    color: Colors.grey,
                    offset: Offset(1.5, 1.5),
                    blurRadius: 3,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

【讨论】：