android - 如何在 SingleChildScroll 内制作水平滚动 ListView

Question

我想创建这样的布局， 图片

我想创建一个可以垂直滚动的颤动应用程序，并且应用程序的某些内容应该水平滚动，如图中所述。我使用 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: (){},
            )
          ],
        ),
      )

标签： androidflutterflutter-layout

Answer 1

代替ListView，您可以使用SingleChildScrollViewwithRow作为孩子。然后给出SingleChildScrollView代码scrollDirection: 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,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),