GitHub：https://github.com/happy-python/flutter_demos/tree/master/gridview_demo

在?ListView?中，如果將屏幕的方向變成橫屏，效果將如下圖所示：

ListView 橫屏

如果采用 GridView 布局，效果將如下圖所示：?

項目整體結果圖：

lib/pages/homepage.dart

判斷設備的方向

Widget _getHomePageBody(BuildContext context) {// 縱向if (MediaQuery.of(context).orientation == Orientation.portrait) {return MyListView(_allCities);} else {return MyGridView(_allCities);}}

lib/widget/mygridview.dart

• 最常用的網格布局 GridView.count
• 使用?InkWell?包裝?Card，利用?onTap?處理點擊事件

import 'package:flutter/material.dart'; import 'package:gridview_demo/model/city.dart'; import 'package:gridview_demo/utils.dart';class MyGridView extends StatelessWidget {final List<City> allCities;MyGridView(this.allCities);@overrideWidget build(BuildContext context) {return GridView.count(crossAxisCount: 3,padding: EdgeInsets.all(10.0),children: allCities.map((City city) {return _getGridViewItemUI(context, city);}).toList(),);}Widget _getGridViewItemUI(BuildContext context, City city) {return InkWell(onTap: () {showSnackBar(context, city);},child: Card(elevation: 4.0,child: Column(children: <Widget>[Image.asset(city.image,fit: BoxFit.cover,),Column(mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[Text(city.name,style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),),Text(city.country,style: TextStyle(fontSize: 13.0,),),Text("Population: ${city.population}",style: TextStyle(fontSize: 11.0,),),],),],),),);} }

?

轉載于:https://www.cnblogs.com/zhujiabin/p/10130390.html

總結

以上是生活随笔為你收集整理的Flutter 案例学习之：GridView的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。