ListView包含GridViews和Flutter中的ListViews

Question

我一直在寻找一种实现此设计的方法，但是我不确定这样做的最佳方法是什么，我想知道如何使用listview和gridview（可以将其更改为按下图标即可查看listview），谢谢

Answer 1

[我认为仅对底部列表使用gridview并向上更改委托人的childAspectRatio（因为网格项显然不会明显升高），crossAxisCount会做到这一点。

import 'package:flutter/material.dart';

class Tires extends StatefulWidget {
  @override
  _TiresState createState() => _TiresState();
}

class _TiresState extends State<Tires> {
  var _crossAxisCount = 1;
  var _childAspectRatio = 2.0;

  @override
  Widget build(BuildContext context) {
    final mediaQuery = MediaQuery.of(context);
    final titleStyle = TextStyle(fontWeight: FontWeight.bold);

    return ListView(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Text('Hot offer', style: titleStyle),
        ),
        SizedBox(height: 8),
        Container(
          height: mediaQuery.size.height / 4,
          child: ListView.separated(
            shrinkWrap: true,
            padding: EdgeInsets.symmetric(horizontal: 16.0),
            scrollDirection: Axis.horizontal,
            itemCount: 10,
            separatorBuilder: (_, __) => SizedBox(width: 10),
            itemBuilder: (_, __) => SizedBox(
              width: mediaQuery.size.width / 3,
              child: Card(),
            ),
          ),
        ),
        SizedBox(height: 8),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          child: Row(
            children: <Widget>[
              Text('Hot offer', style: titleStyle),
              Spacer(),
              IconButton(
                icon: Icon(Icons.list),
                onPressed: () => setState(() {
                  _crossAxisCount = _crossAxisCount = 1;
                  _childAspectRatio = _childAspectRatio = 2.0;
                }),
              ),
              IconButton(
                icon: Icon(Icons.grid_on),
                onPressed: () => setState(() {
                  _crossAxisCount = _crossAxisCount = 2;
                  _childAspectRatio = _childAspectRatio = 1.0;
                }),
              ),
            ],
          ),
        ),
        SizedBox(height: 8),
        GridView.builder(
          primary: false,
          shrinkWrap: true,
          padding: EdgeInsets.symmetric(horizontal: 16.0),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: _childAspectRatio,
            crossAxisSpacing: 16,
            mainAxisSpacing: 16,
            crossAxisCount: _crossAxisCount,
          ),
          itemCount: 15,
          itemBuilder: (_, __) => Card(),
        )
      ],
    );
  }
}