如何在 Flutter 中从模型类创建 GridView

Question

我创建了一个名为 tags 的模型类，但无法在 GridView 中使用它，最好的方法是从下面的标签变量为每个标签创建一个 Conatiner 并将这些容器放在 gridview 中。 我的标签类看起来像，

import 'package:flutter/material.dart';

class Tag {
  final String tag;
  final Color color;
  final String desc;
  final String title;

  Tag(
      {required this.color,
      required this.title,
      required this.desc,
      required this.tag});
}

var tags = [
  Tag(
      color: Colors.blue,
      desc: 'A tag includes all the python posts',
      title: 'the title of python',
      tag: '#python'),
  Tag(
      color: Colors.red,
      desc: 'A tag includes all the java posts',
      title: 'the title of java',
      tag: '#java'),
];

我尝试将 tags 变量放入列表中以创建容器并将其放入 GridView 但仍然无法实现它，请提出一些合适的最佳实践来创建它...

我想制作响应式 GridView 就像 this

以下是我的 GridView 的响应式设计代码，它工作正常，我不希望对此进行任何更改，我只想知道如何从其中包含模型类数据的列表创建小部件列表。

import 'package:flutter/material.dart';

EdgeInsetsGeometry responsivePadding(MediaQueryData mediaQuery) {
  double deviceWidth = mediaQuery.size.width;
  if (deviceWidth < 700) {
    return EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0);
  } else if (deviceWidth < 1200) {
    return EdgeInsets.symmetric(horizontal: 50.0, vertical: 25.0);
  } else if (deviceWidth < 1650) {
    return EdgeInsets.symmetric(horizontal: 80.0, vertical: 40.0);
  }
  return EdgeInsets.symmetric(horizontal: 100.0, vertical: 50.0);
}

int responsiveNumGridTiles(MediaQueryData mediaQuery) {
  double deviceWidth = mediaQuery.size.width;
  if (deviceWidth < 700) {
    return 1;
  } else if (deviceWidth < 1200) {
    return 2;
  } else if (deviceWidth < 1650) {
    return 3;
  }
  return 4;
}

double responsiveImageHeight(MediaQueryData mediaQuery) {
  double deviceWidth = mediaQuery.size.width;
  if (deviceWidth < 700) {
    return 250.0;
  } else if (deviceWidth < 1200) {
    return mediaQuery.size.width * 0.25;
  } else if (deviceWidth < 1650) {
    return mediaQuery.size.width * 0.2;
  }
  return mediaQuery.size.width * 0.15;
}

double responsiveTitleHeight(MediaQueryData mediaQuery) {
  double deviceWidth = mediaQuery.size.width;
  if (deviceWidth < 700) {
    return 120.0;
  } else if (deviceWidth < 1200) {
    return mediaQuery.size.width * 0.1;
  } else if (deviceWidth < 1650) {
    return mediaQuery.size.width * 0.07;
  }
  return mediaQuery.size.width * 0.05;
}

Answer 1

这是具有不同模型类的工作示例，它可以工作， 你可以试试here

import 'package:flutter/material.dart';  
  
void main() {runApp(MyApp());}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
        home: Scaffold(appBar: AppBar(  
          title: Text("Flutter GridView Demo"),  
        ),  
            body: GridView.count(  
                crossAxisCount: 3,  
                crossAxisSpacing: 4.0,  
                mainAxisSpacing: 8.0,  
                children: List.generate(choices.length, (index) {  
                  return Center(  
                    child: SelectCard(choice: choices[index]),  
                  );  
                }  
                )  
            )  
        )  
    );  
  }  
}  
  
class Choice {  
  const Choice({this.title, this.icon});  
  final String title;  
  final IconData icon;  
}  
  
const List<Choice> choices = const <Choice>[  
  const Choice(title: 'Home', icon: Icons.home),  
  const Choice(title: 'Contact', icon: Icons.contacts),  
  const Choice(title: 'Map', icon: Icons.map),  
  const Choice(title: 'Phone', icon: Icons.phone),  
  const Choice(title: 'Camera', icon: Icons.camera_alt),  
  const Choice(title: 'Setting', icon: Icons.settings),  
  const Choice(title: 'Album', icon: Icons.photo_album),  
  const Choice(title: 'WiFi', icon: Icons.wifi),  
];  
  
class SelectCard extends StatelessWidget {  
  const SelectCard({Key key, this.choice}) : super(key: key);  
  final Choice choice;  
  
  @override  
  Widget build(BuildContext context) {  
    final TextStyle textStyle = Theme.of(context).textTheme.display1;  
    return Card(  
        color: Colors.orange,  
        child: Center(child: Column(  
            crossAxisAlignment: CrossAxisAlignment.center,  
            children: <Widget>[  
              Expanded(child: Icon(choice.icon, size:50.0, color: textStyle.color)),  
              Text(choice.title, style: textStyle),  
            ]  
        ),  
        )  
    );  
  }  
}