Flutter?GridView顯示隨機(jī)單詞效果

更新時(shí)間：2022年03月23日 11:17:58 作者：偉雪無(wú)痕

這篇文章主要為大家詳細(xì)介紹了Flutter?GridView顯示隨機(jī)單詞效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter GridView顯示隨機(jī)單詞的具體代碼，供大家參考，具體內(nèi)容如下

一.Flutter GridView屬性及構(gòu)建方法介紹

1.SliverGridDelegateWithFixedCrossAxisCount構(gòu)建固定數(shù)量的Widget

gridDelegate = SliverGridDelegateWithFixedCrossAxisCount(
? ? ? ? ?crossAxisCount: crossAxisCount, //設(shè)置每行個(gè)數(shù)
? ? ? ? ?mainAxisSpacing: mainAxisSpacing, //設(shè)置上下間隙
? ? ? ? ?crossAxisSpacing: crossAxisSpacing, //設(shè)置水平間隙
? ? ? ? ?childAspectRatio: childAspectRatio, //來(lái)設(shè)置寬高比例
? ? ? ?),

1).GridView.custom構(gòu)建

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構(gòu)建

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屬性及構(gòu)建

GridView.count({
? ? Key? key,
? ? Axis scrollDirection = Axis.vertical, //設(shè)置滾動(dòng)方向
? ? bool reverse = false,
? ? ScrollController? controller,
? ? bool? primary,
? ? ScrollPhysics? physics,
? ? bool shrinkWrap = false,
? ? EdgeInsetsGeometry? padding,
? ? required int crossAxisCount, //設(shè)置每行個(gè)數(shù)
? ? double mainAxisSpacing = 0.0,//設(shè)置上下間隙
? ? double crossAxisSpacing = 0.0, //設(shè)置水平間隙
? ? double childAspectRatio = 1.0, //來(lái)設(shè)置寬高比例
? ? 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內(nèi)邊距
? ? ? ? crossAxisCount: 2,//行的Widget數(shù)量
? ? ? ? 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內(nèi)邊距
? ? ? ? crossAxisCount: 2,//行的Widget數(shù)量
? ? ? ? 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,
? ? );
? }
?
}