Flutter - 不可滚动的网格 [英] Flutter - Non-scrollable Grid

问题描述

Is there a way to build a grid that's not scrollable in itself and which size is according to its children, the same way we can specify in a row or column mainAxisSize: MainAxisSize.min?

To give you the big picture -

I'm trying to create a responsive layout that depends on the device's width. It should be split into 2 parts, connected seamlessly via a column.

1) 2 big containers which sizes depend on the screen width, taking into account a small space in between them. Each container's width and height will be the same (square containers).

2) Same idea, but instead have 3 rows, each consisting of 3 smaller containers. This creates a grid. It's very important though that the grid won't be scrollable in itself and that its size will be according to its children. It should only be scrolled together with the rest of the page that's contained in a SingleChildScrollView.

Especially since each container's height needs to be the same as its width, I was thinking of going with a combination of rows, columns, and LayoutBuilder - they gives me all the capabilities I need.

However, before doing things manually, I was wondering if there's something that could work out of the box.

解决方案

Something like this?

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(10.0),
              child: AspectRatio(
                aspectRatio: 1.0,
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    border: Border.all(width: 3.0, color: Colors.green),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
      Container(
        padding: const EdgeInsets.all(10.0),
        child: GridView.builder(
          physics: NeverScrollableScrollPhysics(),
          shrinkWrap: true,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 1.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
          ),
          itemCount: 21,
          itemBuilder: (context, index) {
            return Container(
              decoration: BoxDecoration(
                border: Border.all(width: 3.0),
              ),
            );
          },
        ),
      ),
    ],
  ),
)

这篇关于Flutter - 不可滚动的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！