Flutter踩坑记录

Flutter踩坑记录

布局组件

SliverList和SliverGrid

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

// 不生效
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'),
            )
          ],
        ),
      ),
    ],
  )),