본문 바로가기
Flutter/Flutter FAQ

Flutter 컬럼 안에 플러터 그리드뷰. 어떤 해결책이 있을까요..?, Flutter Gridview in Column. What's solution..?

by 베타코드 2023. 9. 28.
반응형

질문


나는 그리드뷰와 컬럼에 문제가 있습니다. 이 경우에, 나는 그리드뷰의 위쪽에 이미지를 넣고 싶습니다. 해결책을 주세요..

return new Container(
  child: new Column(
    children: <Widget>[
      new Container(
        child: new Image.asset(
          "assets/promo.png",
          fit: BoxFit.cover,
        ),
      ),
      new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: new List<Widget>.generate(16, (index) {
            return new GridTile(
                header: new Container(
                  padding: const EdgeInsets.all(10.0),
                  alignment: Alignment.centerRight,
                  child: new Icon(
                    Icons.shopping_cart,
                    size: 20.0,
                    color: Colors.red,
                  ),
                ),
                child: new MyList(
                  nomor: '$index',
                ));
          }),
        ),
      ),
    ],
  ),
);

그리고 이것은 결과입니다: Flutter Gridview in Column


답변


그리드 뷰를 Expanded 위젯에 넣어야 합니다. 예를 들어:

body: new Column(
  children: <Widget>[
    new Expanded(
      child: GridView.count(
        // 2개의 열을 가진 그리드를 생성합니다. scrollDirection을 가로로 변경하면 2개의 행을 생성합니다.
        crossAxisCount: 2,
        // List에서 인덱스를 표시하는 100개의 위젯을 생성합니다.
        children: List.generate(10, (index) {
          return _buildCard(index);
        }),
      ),
    ),
    new Text("텍스트")
  ],
),
반응형

댓글