Flutter GridView显示随机单词效果
作者：伟雪无痕
这篇文章主要为大家详细介绍了Flutter GridView显示随机单词效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Flutter GridView显示随机单词的具体代码，供大家参考，具体内容如下
一.Flutter GridView属性及构建方法介绍
1.SliverGridDelegateWithFixedCrossAxisCount构建固定数量的Widget
gridDelegate = SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: crossAxisCount, //设置每行个数 mainAxisSpacing: mainAxisSpacing, //设置上下间隙 crossAxisSpacing: crossAxisSpacing, //设置水平间隙 childAspectRatio: childAspectRatio, //来设置宽高比例 ),
1).GridView.custom构建
GridView.custom(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
childrenDelegate: SliverChildBuilderDelegate((context, position) {
return getItemContainer(datas[position].asPascalCase);
}, childCount: datas.length))2).GridView.builder构建
GridView.builder(
itemCount: datas.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
return getItemContainer(datas[index]);
}),2. GridView.count属性及构建
GridView.count({
Key? key,
Axis scrollDirection = Axis.vertical, //设置滚动方向
bool reverse = false,
ScrollController? controller,
bool? primary,
ScrollPhysics? physics,
bool shrinkWrap = false,
EdgeInsetsGeometry? padding,
required int crossAxisCount, //设置每行个数
double mainAxisSpacing = 0.0,//设置上下间隙
double crossAxisSpacing = 0.0, //设置水平间隙
double childAspectRatio = 1.0, //来设置宽高比例
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double? cacheExtent,
List<Widget> children = const <Widget>[],
int? semanticChildCount,
DragStartBehavior dragStartBehavior = DragStartBehavior.start,
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
String? restorationId,
Clip clipBehavior = Clip.hardEdge,
})GridView.count( crossAxisSpacing: 10.0,//水平子Widget之间间距 mainAxisSpacing: 20.0,//垂直子Widget之间间距 padding: const EdgeInsets.all(10.0),//GridView内边距 crossAxisCount: 2,//行的Widget数量 childAspectRatio: 2.0,//子Widget宽高比例 children: getWidgetList()//子Widget列表 ),
二.demo展示
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
class GridViewPage extends StatefulWidget{
const GridViewPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState()=>GridViewPageStae();
}
class GridViewPageStae extends State<GridViewPage>{
@override
Widget build(BuildContext context) {
//final _suggestions=<WordPair>[];
List<WordPair> datas =generateWordPairs().take(100).toList();
return Scaffold(
appBar: AppBar(
title: Text('Gridview test'),
),
body:/*GridView.custom(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
childrenDelegate: SliverChildBuilderDelegate((context, position) {
return getItemContainer(datas[position].asPascalCase);
}, childCount: datas.length))*/
/* GridView.count(
crossAxisSpacing: 10.0,//水平子Widget之间间距
mainAxisSpacing: 20.0,//垂直子Widget之间间距
padding: const EdgeInsets.all(10.0),//GridView内边距
crossAxisCount: 2,//行的Widget数量
childAspectRatio: 2.0,//子Widget宽高比例
children: getWidgetList()//子Widget列表
),*/
GridView.builder(
itemCount: datas.length,
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 20.0,
crossAxisSpacing: 10.0,
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
return getItemContainer(datas[index]);
}),
);
}
List<WordPair> getDataList() {
List<WordPair> datas =generateWordPairs().take(100).toList();
return datas;
}
List<Widget> getWidgetList() {
return getDataList().map((item) => getItemContainer(item)).toList();
}
Widget getItemContainer(WordPair item) {
return Container(
alignment: Alignment.center,
//width: 50.0,
//height: 50.0,
child: Text(
item.asPascalCase,
style: const TextStyle(color: Colors.white, fontSize: 18),
),
color: Colors.lightGreen,
);
}
}三.实际效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。