> For the complete documentation index, see [llms.txt](https://1425816423.gitbook.io/my-knowledge-base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://1425816423.gitbook.io/my-knowledge-base/jing-yan-ji-lu/cai-keng-ji-lu/flutter-cai-keng-ji-lu.md).

# Flutter踩坑记录

## Flutter踩坑记录

## 布局组件

### SliverList和SliverGrid

SliverList组件和SliverGride组件必须在外层包裹一层具有高度的父组件（例如Container）才能生效。

```jsx
// 不生效
CustomScrollView(
  slivers: [
    SliverGrid(
      gridDelegate:
          const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildListDelegate(
        [
          Image.asset(
            'assets/images/1.jpg',
            height: 70,
            width: 70,
          ),
          Container(
            alignment: Alignment.center,
            child: const Text('grid item'),
          )
        ],
      ),
    ),
  ],
)

// 生效
Container(
  height: 500,
  child: CustomScrollView(
    slivers: [
      SliverGrid(
        gridDelegate:
            const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 200.0,
          mainAxisSpacing: 10.0,
          crossAxisSpacing: 10.0,
          childAspectRatio: 4.0,
        ),
        delegate: SliverChildListDelegate(
          [
            Image.asset(
              'assets/images/1.jpg',
              height: 70,
              width: 70,
            ),
            Container(
              alignment: Alignment.center,
              child: const Text('grid item'),
            )
          ],
        ),
      ),
    ],
  )),
```