如何在 Flutter 中从模型 class 创建 GridView
How to create a GridView from model class in Flutter
我创建了一个名为 tags
的模型 class 但无法在 GridView 中使用它,最好的方法是什么,比如从下面的标签变量为每个标签创建一个 Conatiner并将这些容器放在 gridview 中。
我的标签 class 看起来像
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 的响应式设计代码,它工作正常我不想对此进行任何更改,我只想知道我们如何从具有模型 class 的列表创建小部件列表里面有数据。
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;
}
这是不同型号的工作示例 class 它可以工作,
你可以试试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),
]
),
)
);
}
}
我创建了一个名为 tags
的模型 class 但无法在 GridView 中使用它,最好的方法是什么,比如从下面的标签变量为每个标签创建一个 Conatiner并将这些容器放在 gridview 中。
我的标签 class 看起来像
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 的响应式设计代码,它工作正常我不想对此进行任何更改,我只想知道我们如何从具有模型 class 的列表创建小部件列表里面有数据。
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;
}
这是不同型号的工作示例 class 它可以工作, 你可以试试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),
]
),
)
);
}
}