Flutter GridView显示随机单词
Posted 伟雪无痕
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,
);
三.实际效果
以上是关于Flutter GridView显示随机单词的主要内容,如果未能解决你的问题,请参考以下文章
Flutter listview随机单词显示及自定义dialog