본문 바로가기
Flutter/Flutter FAQ

Flutter GridView.Builder의 자식들에게 높이를 주는 방법은 무엇인가요?, flutter how to give height to the childrens of GridView.Builder

by 베타코드 2023. 12. 11.
반응형

질문


나는 gridview.builder의 자식에게 높이를 주려고 시도하고 있지만, 받아들이지 않고 있습니다. 컨테이너를 사용하여 시도했지만 작동하지 않습니다... 도와주세요

GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 280.0,
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding:
                            EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Container(
                          height: 208.5,
                          width: 138.75,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(10.0),
                              image: DecorationImage(
                                  image: NetworkImage(
                                      "${snapshot.data[index].url}"),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Text(
                        snapshot.data[index].title,
                        style: TextStyle(fontSize: 17.0),
                      ),
                    ],
                  ),
                );
              },
            ),`

img


답변


다음은 SliverGridDelegatechildAspectRatio 속성을 MediaQuery와 함께 사용하는 것이 좋습니다:

데모 사진

class HomePage extends StatelessWidget {
  final List<String> items = <String>[
    "아이템 1",
    "아이템 2",
    "아이템 3",
    "아이템 4",
    "아이템 5",
    "아이템 6",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('홈')),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          childAspectRatio: MediaQuery.of(context).size.width /
              (MediaQuery.of(context).size.height / 4),
        ),
        itemCount: items.length,
        itemBuilder: (context, index) {
          return GridTile(child: Text(items[index]));
        },
      ),
    );
  }
}
반응형

댓글