如何在flutter中创建像这样的交错网格视图

Question

如果您需要更多信息，请发表评论。谢谢

如何创建抖动的交错网格视图，例如 带有headerTile +每个网格图块中的图像+居中文本

Answer 1

首先，创建一个子级和父级模型类，ParentModel包含标题文本及其子级列表

class ParentModel {
  String title;
  List<ChildModel> list;
  ParentModel(this.title, this.list);
}

class ChildModel {
  String text;
  ChildModel(this.text);
}

然后创建一个ListView，此列表将包含标题及其子网格。

class ComplexList extends StatefulWidget {
  @override
  _ComplexListState createState() => _ComplexListState();
}

class _ComplexListState extends State<ComplexList> {
  List<ParentModel> parentList = List();

  @override
  void initState() {
    super.initState();
// this list is just to add dummy data, replace this with your list from api
    List<ChildModel> childList = List();
    childList.add(ChildModel('Child1'));
    childList.add(ChildModel('Child2'));
    childList.add(ChildModel('Child3'));
    childList.add(ChildModel('Child4'));
    List<ChildModel> childList1 = List();
    childList1.add(ChildModel('Child5'));
    childList1.add(ChildModel('Child6'));
    childList1.add(ChildModel('Child7'));
    childList1.add(ChildModel('Child8'));
    parentList.add(ParentModel('Title1', childList));
    parentList.add(ParentModel('Title2', childList1));
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: parentList.length,
        itemBuilder: (context, index) {
          ParentModel parentModel = parentList[index];
          return Column(
            children: <Widget>[Text('${parentModel.title}',style: TextStyle(fontSize: 16),),
              GridView.count(
                shrinkWrap: true,
                // Create a grid with 2 columns. If you change the scrollDirection to
                // horizontal, this produces 2 rows.
                crossAxisCount: 2,
                // Generate 100 widgets that display their index in the List.
                children: List.generate(parentModel.list.length, (index) {
                  ChildModel childModel = parentModel.list[index];
                  return Card(

                    child: Center(
                      child: Text(
                        'Item ${childModel.text}',
                        style: Theme
                            .of(context)
                            .textTheme
                            .headline,
                      ),
                    ),
                  );
                }),
              ),
            ],
          );
        });
  }
}

此代码的输出，