Flutter 如何使用颤振在同一屏幕中创建多个水平“GridView”

是否有一种方法可以在一个屏幕中创建

gridview

列表，如下图所示。。。

我有一个屏幕，如下所示：

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var _showOnlyFavorites = false;
  AnimationController animationController;
  bool multiple = true;

  @override
  void initState() {
    animationController = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    super.initState();
  }

  Future<bool> getData() async {
    await Future<dynamic>.delayed(const Duration(milliseconds: 0));
    return true;
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: AppTheme.white,
      body: FutureBuilder<bool>(
        future: getData(),
        builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
          if (!snapshot.hasData) {
            return const SizedBox();
          } else {
            return Padding(
              padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  appBar(),
                  Expanded(
                    child: FutureBuilder<bool>(
                      future: getData(),
                      builder:
                          (BuildContext context, AsyncSnapshot<bool> snapshot) {
                        if (!snapshot.hasData) {
                          return const SizedBox();
                        } else {
                          return PropertiesGrid(_showOnlyFavorites);
                        }
                      },
                    ),
                  ),
                ],
              ),
            );
          }
        },
      ),
    );
  }

  Widget appBar() {
    return SizedBox(
      height: AppBar().preferredSize.height,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 8, left: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
            ),
          ),
          Expanded(
            child: Center(
              child: Padding(
                padding: const EdgeInsets.only(top: 4),
                child:
                    Image.asset('assets/images/logo.png', fit: BoxFit.contain),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(top: 8, right: 8),
            child: Container(
              width: AppBar().preferredSize.height - 8,
              height: AppBar().preferredSize.height - 8,
              color: Colors.white,
              child: Material(
                color: Colors.transparent,
                child: InkWell(
                  borderRadius:
                      BorderRadius.circular(AppBar().preferredSize.height),
                  child: Icon(
                    multiple ? Icons.dashboard : Icons.view_agenda,
                    color: AppTheme.dark_grey,
                  ),
                  onTap: () {
                    setState(() {
                      multiple = !multiple;
                    });
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我试图通过使用

容器包装网格来设置网格的高度，并将其设置为添加更多网格，但它不起作用

这是我的
网格项
小部件代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/property.dart';

class PropertyItem extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final property = Provider.of<Property>(context, listen: false);
    return InkWell(
      onTap: () => {},
      child: Card(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(15),
        ),
        elevation: 7,
        margin: EdgeInsets.all(2),
        child: Stack(
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(15),
                topRight: Radius.circular(15),
              ),
              // color: Colors.transparent,
              child: Image.asset(
                property.image,
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              top: 8,
              right: 8,
              child: Consumer<Property>(
                builder: (ctx, property, _) => IconButton(
                  icon: Icon(
                    property.isFavorite ? Icons.favorite : Icons.favorite_border,
                  ),
                  color: Colors.red,
                  onPressed: () {
                    property.toggleFavoriteStatus();
                  },
                ),
              ),
            ),
            Positioned(
                  right: 20,
                  top: 100,
                  child: Container(
                    width: 300,
                    color: Colors.black54,
                    padding: EdgeInsets.symmetric(
                      vertical: 5,
                      horizontal: 20,
                    ),
                    child: Text(
                      property.title,
                      style: TextStyle(
                        fontSize: 20,
                        color: Colors.white,
                      ),
                      softWrap: true,
                      overflow: TextOverflow.fade,
                    ),
                  ),
                )
          ],
        ),
      ),
    );
  }
}


导入“包装：颤振/材料.省道”；
导入“包：provider/provider.dart”；
导入“../providers/property.dart”；
类PropertyItem扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
final属性=Provider.of（上下文，listen:false）；
回墨槽(
onTap:（）=>{}，
孩子：卡片(
形状：圆形矩形边框(
边界半径：边界半径。圆形（15），
),
标高：7，
保证金：所有（2），
子：堆栈(
儿童：[
ClipRRect(
borderRadius：仅限borderRadius(
左上：半径。圆形（15），
右上角：半径。圆形（15），
),
//颜色：颜色。透明，
子：Image.asset(
属性。图像，
fit:BoxFit.fill，
),
),
定位(
前8名，
右:8,，
儿童：消费者(
生成器：（ctx，属性，）=>IconButton(
图标：图标(
property.isFavorite？Icons.favorite:Icons.favorite\u边框，
),
颜色：颜色，红色，
已按下：（）{
toggleFavoriteStatus（）；
},
),
),
),
定位(
右:20,，
前100名，
子：容器(
宽度：300，
颜色：颜色。黑色54，
填充：EdgeInsets.symmetric(
垂直：5，
横向：20，
),
子：文本(
产权，
样式：TextStyle(
尺寸：20，
颜色：颜色，白色，
),
软包装：是的，
溢出：TextOverflow.fade，
),
),
)
],
),
),
);
}
}
您需要一个列，其中每个
列表视图
或
网格视图
被包装在一个
大小的框中（如果您有特定的高度），并且您还可以使用
扩展的
来获取任何可用空间（如给定示例中的最后一个）：

您可以在中发布下面的代码，并查看其工作原理：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Align(
              child: Text("The Second List"),
              alignment: Alignment.centerRight,
            ),
          ),
          SizedBox(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Align(
              child: Text("The Third List"),
              alignment: Alignment.centerRight,
            ),
          ),
          Expanded(
            //height: 200,
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              scrollDirection: Axis.vertical,
              itemCount: 20,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

非常感谢兄弟这个解决方案解决了我的问题：D
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Align(
              child: Text("The Second List"),
              alignment: Alignment.centerRight,
            ),
          ),
          SizedBox(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 10,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Align(
              child: Text("The Third List"),
              alignment: Alignment.centerRight,
            ),
          ),
          Expanded(
            //height: 200,
            child: GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 3 / 2,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10,
              ),
              scrollDirection: Axis.vertical,
              itemCount: 20,
              itemBuilder: (c, i) {
                return Card(
                  child: Container(
                    height: 100,
                    width: 100,
                    child: Center(child: Text("$i")),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}