스크롤시 앱바 자동숨기기 + 그리드 형태로 목록 출력하기 (2열)

 

스크롤시 앱바 자동숨기기 + 그리드 형태로 목록 출력하기 (2열)

@override
  Widget build(BuildContext context) {
    return CustomScrollView(
      controller: ScrollController(),
      physics: const AlwaysScrollableScrollPhysics(
        parent: BouncingScrollPhysics(),
      ),
      slivers: [
        SliverAppBar(
          toolbarHeight: 40,
          backgroundColor: Colors.purple.shade100,
          title: const Text('제목'),
          centerTitle: true,
          floating: true,
          snap: true,
          // actions: [
          //   IconButton(
          //     onPressed: () {
          //       print('bell tapped');
          //     },
          //     icon: const Icon(Icons.notifications),
          //   ),
          //   const Text('GUEST'),
          // ],
        ),
        SliverPadding(
          padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
          sliver: Obx(
            () => SliverGrid(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {                  
                  return Text('Item $index ');
                },
                childCount: 30,
              ),
              // 열 개수 고정
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                // 한 줄에 보일 내용의 수 - 필수값
                crossAxisCount: 2,
                // GridView Item 간의 세로 간격
                crossAxisSpacing: 20,
                // GridView Item 간의 가로 간격
                mainAxisSpacing: 20,
                // 비율 
                childAspectRatio: 0.7,
              ),
              // // 열개수 동적으로 적용
              // gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              //   maxCrossAxisExtent: 150.0,
              //   mainAxisSpacing: 1.0,
              //   crossAxisSpacing: 1.0,
              //   childAspectRatio: 3 / 4,
              // ),
            ),
          ),
        ),
      ],
    );
  }

 

 

스크롤시 앱바 자동숨김