SingleChildScroll 내에서 수평 스크롤 ListView를 만드는 방법

Techlingda 자습서

이런 레이아웃을 만들고 싶습니다. Image

세로로 스크롤 할 수있는 플러터 앱을 만들고 싶고 앱의 일부 콘텐츠도 그림에서 설명하는대로 가로로 스크롤해야합니다. SingleChildScrollView 내부에서 가로로 스크롤하는 ListView를 사용했지만 작동하지 않습니다. 콘텐츠 Horizontal 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: (){},
            )
          ],
        ),
      )
아라 쉬 모하마디

대신 ListView, 당신은 사용할 수 SingleChildScrollView와 함께 Row아이로. 그런 다음 줄 코드 :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,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

수평 스크롤보기에서 스크롤 상태를 얻는 방법 : Android

분류에서Dev

의 Andorid에 스크롤 그룹화 된 막대 그래프를 수평 만드는 방법

분류에서Dev

수평 스크롤에 부드러운 스크롤 효과를 추가하는 방법은 무엇입니까?

분류에서Dev

Flutter에서 수평 스크롤 애니메이션을 만드는 방법

분류에서Dev

스토리 보드를 사용하여 iOS에서 수평 및 수직 스크롤 TableView를 만드는 방법은 무엇입니까?

분류에서Dev

div 내에서 수직 자동 스크롤 이미지를 만드는 방법은 무엇입니까?

분류에서Dev

ReactNative에서 Flatlist를 스크롤 할 수 없도록 만드는 방법

분류에서Dev

수평 스크롤 막대를 만드는 메뉴에서 슬라이드

분류에서Dev

Android에서 스크롤 메뉴를 만드는 방법

분류에서Dev

UIButton 내부의 텍스트를 수직 및 수평으로 만드는 방법

분류에서Dev

수평 스크롤바를 제거하는 방법?

분류에서Dev

수평 스크롤바에 마스크 그라디언트를 추가하는 방법

분류에서Dev

Vim에서 스크롤하는 동안 커서 수평 위치를 유지하는 방법

분류에서Dev

스크롤 뷰를 만드는 방법, iOS 스크롤시 특정 페이지에서 스크롤

분류에서Dev

javascript 및 / 또는 css에서 아래로 스크롤 할 때 div를 수평으로 이동하는 방법

분류에서Dev

Dojo 트리에서 수평 스크롤바를 제거하는 방법은 무엇입니까?

분류에서Dev

Windows Phone 8에서 스크롤 할 수없는 목록 상자를 만드는 방법

분류에서Dev

JList에 대해 수평 및 수직 스크롤바를 표시하는 방법은 무엇입니까?

분류에서Dev

테이블에 수평 상단 스크롤바를 추가하는 Aurelia 방식?

분류에서Dev

DataGrid 수평 스크롤 크기를 얻는 방법은 무엇입니까?

분류에서Dev

tkinter에서 동적 스크롤 가능 그리드를 만드는 방법

분류에서Dev

Android에서 세로 스크롤링 텍스트 뷰를 만드는 방법

분류에서Dev

수평 및 수직 스크롤 뷰를 모두 활성화하는 방법

분류에서Dev

nedit와 같은 편집기를 사용하여 트랙 패드에서 수평으로 스크롤 할 수있는 방법이 있습니까?

분류에서Dev

Flutter에서 수평 3D ListView를 구현하는 방법

분류에서Dev

XAML에서 스크롤 뷰어의 스크롤바를 비대화 형으로 만드는 방법

분류에서Dev

<div>를 아래에서 스크롤 가능하게 만드는 방법

분류에서Dev

QtQuick 2.0에서 스크롤바를 만드는 방법은 무엇입니까?

분류에서Dev

클래스 내부의 변수 값에서 개체를 만드는 방법

Related 관련 기사

  1. 1

    수평 스크롤보기에서 스크롤 상태를 얻는 방법 : Android

  2. 2

    의 Andorid에 스크롤 그룹화 된 막대 그래프를 수평 만드는 방법

  3. 3

    수평 스크롤에 부드러운 스크롤 효과를 추가하는 방법은 무엇입니까?

  4. 4

    Flutter에서 수평 스크롤 애니메이션을 만드는 방법

  5. 5

    스토리 보드를 사용하여 iOS에서 수평 및 수직 스크롤 TableView를 만드는 방법은 무엇입니까?

  6. 6

    div 내에서 수직 자동 스크롤 이미지를 만드는 방법은 무엇입니까?

  7. 7

    ReactNative에서 Flatlist를 스크롤 할 수 없도록 만드는 방법

  8. 8

    수평 스크롤 막대를 만드는 메뉴에서 슬라이드

  9. 9

    Android에서 스크롤 메뉴를 만드는 방법

  10. 10

    UIButton 내부의 텍스트를 수직 및 수평으로 만드는 방법

  11. 11

    수평 스크롤바를 제거하는 방법?

  12. 12

    수평 스크롤바에 마스크 그라디언트를 추가하는 방법

  13. 13

    Vim에서 스크롤하는 동안 커서 수평 위치를 유지하는 방법

  14. 14

    스크롤 뷰를 만드는 방법, iOS 스크롤시 특정 페이지에서 스크롤

  15. 15

    javascript 및 / 또는 css에서 아래로 스크롤 할 때 div를 수평으로 이동하는 방법

  16. 16

    Dojo 트리에서 수평 스크롤바를 제거하는 방법은 무엇입니까?

  17. 17

    Windows Phone 8에서 스크롤 할 수없는 목록 상자를 만드는 방법

  18. 18

    JList에 대해 수평 및 수직 스크롤바를 표시하는 방법은 무엇입니까?

  19. 19

    테이블에 수평 상단 스크롤바를 추가하는 Aurelia 방식?

  20. 20

    DataGrid 수평 스크롤 크기를 얻는 방법은 무엇입니까?

  21. 21

    tkinter에서 동적 스크롤 가능 그리드를 만드는 방법

  22. 22

    Android에서 세로 스크롤링 텍스트 뷰를 만드는 방법

  23. 23

    수평 및 수직 스크롤 뷰를 모두 활성화하는 방법

  24. 24

    nedit와 같은 편집기를 사용하여 트랙 패드에서 수평으로 스크롤 할 수있는 방법이 있습니까?

  25. 25

    Flutter에서 수평 3D ListView를 구현하는 방법

  26. 26

    XAML에서 스크롤 뷰어의 스크롤바를 비대화 형으로 만드는 방법

  27. 27

    <div>를 아래에서 스크롤 가능하게 만드는 방법

  28. 28

    QtQuick 2.0에서 스크롤바를 만드는 방법은 무엇입니까?

  29. 29

    클래스 내부의 변수 값에서 개체를 만드는 방법

뜨겁다태그

보관