譯 Flutter 系列入門教程五網格

譯文出自：掘金翻譯計畫

譯者：yueyong

fluttergridview幾乎與listview相同，只是它提供了與listview單向檢視的 2d 檢視比較。同時它也是移動應用開發中非常受歡迎的小部件。如果你不相信我，那就舉個例子，開啟你手機中的任何乙個電子商務應用，它肯定是依賴於listview或gridview來顯示資料的。

amazon移動應用程式利用網格顯示資料

我將以我之前的文章為基礎 flutter getting started: tutorial 4 listview，我已經建立了基於 listview 的應用程式，這裡是初始專案結構和初始ui。

這是我們開始構建的初始**

class homepage extends statelesswidget 
final globalkey scaffoldkey = new globalkey();
@override
widget build(buildcontext context) 
gethomepagebody(buildcontext context) 
widget _getlistitemui(buildcontext context, int index,
) ',
style: new textstyle(
fontsize: 11.0, fontweight: fontweight.normal)),
]),ontap: () ,)],
));}  _showsnackbar(buildcontext context, city item)  is a city in $"),
backgroundcolor: colors.amber,
);scaffold.of(context).showsnackbar(objsnackbar);
}}複製**

在開始實際任務之前，讓我簡要介紹一下我上面做過的事情

現在開始我們的工作，正如我之前提到的，我們將把新的 widget 重構為不同的類，以保持我們的**模組化並提高**的可讀性。因此，在lib資料夾下建立乙個新的資料夾，並新增新的 dart 檔案mygridview.dart。

新增檔案後，首先通過'package:flutter/material.dart'匯入 material 元件，然後新增mygridview類來繼承我們最喜歡的statelesswidget並複寫build函式，**如下所示

import 'package:flutter/material.dart';
import 'package:flutter5_gridlist/model/city.dart';
class mygridview extends statelesswidget ) : super(key: key);
@override
widget build(buildcontext context) 
}複製**

我現在新增基本的 gridview 只顯示城市名稱，所以我將在重寫的 build 函式中新增以下**

@override
widget build(buildcontext context) 
_getgridviewitems(buildcontext context);
return allwidgets;
}複製**

對上述**的解釋

這是ui的樣子

現在我們來改變 ui 讓其類似於我們看到的 listview。在這裡我建立了乙個新的函式，它將以 card 的形式傳送 city 類

// create individual item
_getgriditemui(buildcontext context, city item) ,
child: new card(
child: new column(
crossaxisalignment: crossaxisalignment.start,
children: [
new image.asset(
"assets/" + item.image,
fit: boxfit.fill,
),new expanded(
child: new center(
child: new column(
children: [
new sizedbox(height: 8.0),
new text(
item.name,
style: new textstyle(
fontsize: 20.0,
fontweight: fontweight.bold,
),),
new text(item.country),
new text('population: $')
],)))
],),
elevation: 2.0,
margin: edgeinsets.all(5.0),
));}複製**

上述**的解釋

如果沒有忘記的話，在開始做程式時我就說過，我將在縱向方向上顯示listview，在橫向方向上顯示gridview，為了實現它我們需要mediaquery類來識別方向。無論何時更改方向，你都可以決定哪些**應該被呼叫，也就是說，即使你傾斜移動視窗都會呼叫build函式，小部件也都會重新繪製。所以在homepage.dart類中我們將使用以下函式來處理 orientation 更改的問題

gethomepagebody(buildcontext context) 
複製**

因此，最終的 ui 將是這樣的

本教程結束

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到掘金翻譯計畫對譯文進行修改並 pr，也可獲得相應獎勵積分。文章開頭的本文永久鏈結即為本文在 github 上的 markdown 鏈結。

譯 Flutter 系列入門教程五網格

Eclipse RCP 開發系列入門教程

Flutter 入門教程

WPF入門教程系列五 Window 介紹

譯 Flutter 系列入門教程五 網格

Eclipse RCP 開發系列入門教程

Flutter 入門教程

WPF入門教程系列五 Window 介紹

相關推薦

譯 Flutter 系列入門教程五網格