Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to display random word effects in Flutter GridView". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. introduction of Flutter GridView attributes and construction methods

1.SliverGridDelegateWithFixedCrossAxisCount builds a fixed number of Widget

GridDelegate = SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: crossAxisCount, / / set the number of rows per row mainAxisSpacing: mainAxisSpacing, / / set the upper and lower gap crossAxisSpacing: crossAxisSpacing, / / set the horizontal gap childAspectRatio: childAspectRatio, / / set the width-height ratio)

1) .GridView.custom build

GridView.custom (gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount (crossAxisCount: 2, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0,), childrenDelegate: SliverChildBuilderDelegate ((context, position) {return getItemContainer (data [position] .asPascalCase);}, childCount: datas.length))

2) .GridView.builder build

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

2. GridView.count attributes and construction

GridView.count ({Key? Key, Axis scrollDirection = Axis.vertical, / / set scrolling direction bool reverse = false, ScrollController? Controller, bool? Primary, ScrollPhysics? Physics, bool shrinkWrap = false, EdgeInsetsGeometry? Padding, required int crossAxisCount, / / set the number of rows per row double mainAxisSpacing = 0. 0jigzag / set the upper and lower gap double crossAxisSpacing = 0. 0jue pinch / set the horizontal gap double childAspectRatio = 1. 0, / / to set the width-height ratio bool addAutomaticKeepAlives = true, bool addRepaintBoundaries = true, bool addSemanticIndexes = true, double? CacheExtent, List children = const [], int? SemanticChildCount, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual, String? RestorationId, Clip clipBehavior = Clip.hardEdge,}) GridView.count (crossAxisSpacing: 10.0 Widget / horizontal Widget spacing mainAxisSpacing: 20.0 padding / vertical Widget spacing padding: const EdgeInsets.all, / / GridView inner margin crossAxisCount: 2 Widget number of Widget / row childAspectRatio: 2.0 / / Sub-Widget aspect ratio children: getWidgetList () / / Sub-Widget list), II. Demo shows 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 createState () = > GridViewPageStae ();} class GridViewPageStae extends State {@ override Widget build (BuildContext context) {/ / final _ suggestions= []; List 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 / horizontal Widget spacing mainAxisSpacing: 20.0 Widget spacing between padding: const EdgeInsets.all / vertical sub-Widget, / / GridView inner margin crossAxisCount: 2 Widget number of lines childAspectRatio: 2.0 / Sub-Widget aspect ratio children: getWidgetList () / / Sub-Widget list), * / 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 (data [index]) }),);} List getDataList () {List datas = generateWordPairs () .take (100.toList (); return datas;} List 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,);}} three. Actual effect

So much for the content of "how Flutter GridView displays random word effects". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.