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.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怎么显示随机单词效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！