[譯] Flutter 系列入門教程五：網格

僱個城管打天下發表於2019-03-03
Flutter

介紹

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

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

[譯] Flutter 系列入門教程五：網格

另一個是 PayTM，它是印度流行的線上錢包服務應用之一，它廣泛使用網格佈局來顯示不同的產品

[譯] Flutter 系列入門教程五：網格

背景

本文的最終目的是實現類似的介面：

[譯] Flutter 系列入門教程五：網格

但是，如果你注意到上面的影像，那是橫屏模式下的。所以我將在本文中做以下的事情，當應用程式處於豎屏模式時，移動 APP 將在 ListView 中顯示專案，當它處於橫屏模式時，將會在網格中每行顯示3個條目。我還通過在單獨的類中移動 gridview 來實現建立自定義視窗小部件。

使用程式碼

我將以我之前的文章為基礎 Flutter Getting Started: Tutorial 4 ListView，我已經建立了基於 ListView 的應用程式，這裡是初始專案結構和初始UI。

這是我們開始構建的初始程式碼

class HomePage extends StatelessWidget {
  final List<City> _allCities = City.allCities();

  HomePage() {}
  final GlobalKey scaffoldKey = new GlobalKey();
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        key: scaffoldKey,
        appBar: new AppBar(
          title: new Text(
            "Cites around world",
            style: new TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
                color: Colors.black87),
          ),
        ),
        body: new Padding(
            padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
            child: getHomePageBody(context)));
  }

  getHomePageBody(BuildContext context) {
   
      return ListView.builder(
        itemCount: _allCities.length,
        itemBuilder: _getListItemUI,
        padding: EdgeInsets.all(0.0),
      );
   
  }

  Widget _getListItemUI(BuildContext context, int index,
      {double imgwidth: 100.0}) {
    return new Card(
        child: new Column(
      children: <Widget>[
        new ListTile(
          leading: new Image.asset(
            "assets/" + _allCities[index].image,
            fit: BoxFit.fitHeight,
            width: imgwidth,
          ),
          title: new Text(
            _allCities[index].name,
            style: new TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),
          ),
          subtitle: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(_allCities[index].country,
                    style: new TextStyle(
                        fontSize: 13.0, fontWeight: FontWeight.normal)),
                new Text(`Population: ${_allCities[index].population}`,
                    style: new TextStyle(
                        fontSize: 11.0, fontWeight: FontWeight.normal)),
              ]),
          onTap: () {
            _showSnackBar(context, _allCities[index]);
          },
        )
      ],
    ));
  }

  _showSnackBar(BuildContext context, City item) {
    final SnackBar objSnackbar = new SnackBar(
      content: new Text("${item.name} is a city in ${item.country}"),
      backgroundColor: Colors.amber,
    );

    Scaffold.of(context).showSnackBar(objSnackbar);
  }
}
複製程式碼

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

  • 我已經使用 ListView.builder 建立了簡單的 ListView，它可以靈活地建立無限的 listitem 檢視，因為它只呼叫那些可以在螢幕上顯示的專案的回撥函式。
  • 我正在顯示城市資訊，如城市地標影像，其次是城市名稱，城市所屬的國家和她的人口。
  • 最後點選，它在螢幕底部顯示小的會自動消失的訊息，稱為 SnackBar。

現在開始我們的工作，正如我之前提到的，我們將把新的 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 {
  final List<City> allCities;
  MyGridView({Key key, this.allCities}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return null;
  }
}
複製程式碼

我現在新增基本的 GridView 只顯示城市名稱，所以我將在重寫的 Build 函式中新增以下程式碼

@override
Widget build(BuildContext context) {
  return GridView.count(
    crossAxisCount: 3,
    padding: EdgeInsets.all(16.0),
     childAspectRatio: 8.0,
    children: _getGridViewItems(context),
  );
}
_getGridViewItems(BuildContext context){
  List<Widget> allWidgets = new List<Widget>();
  for (int i = 0; i < allCities.length; i++) {
    var widget = new Text(allCities[i].name);
    allWidgets.add(widget);
  };
  return allWidgets;
}
複製程式碼

對上述程式碼的解釋

  • GridView.count 方法將為應用程式提供 GridView 小部件
  • crossAxisCount 屬性用於讓移動應用程式知道我們想要顯示每行的專案數
  • children 屬性將包含您希望在載入頁面時顯示的所有小部件
  • childAspectRatio，它是每個子節點的橫軸與主軸範圍的比率，因為我顯示的是名稱，所以我統一設定為 8.0，以便減少兩個圖塊之間的邊距

這是UI的樣子

[譯] Flutter 系列入門教程五：網格

現在我們來改變 UI 讓其類似於我們看到的 ListView。在這裡我建立了一個新的函式，它將以 Card 的形式傳送 City 類

// Create individual item
_getGridItemUI(BuildContext context, City item) {
  return new InkWell(
      onTap: () {
        _showSnackBar(context, item);
      },
      child: new Card(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            new Image.asset(
              "assets/" + item.image,
              fit: BoxFit.fill,
              
            ),
            new Expanded(
                child: new Center(
                    child: new Column(
              children: <Widget>[
                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: ${item.population}`)
              ],
            )))
          ],
        ),
        elevation: 2.0,
        margin: EdgeInsets.all(5.0),
      ));
}
複製程式碼

上述程式碼的解釋

  • 我正在使用 Inkwell 類，因為 Card 類不直接支援手勢，所以我把它包裝在 InkWell 類中，利用它的 onTap 事件替換 SnackBar
  • 其餘程式碼類似於 ListView 的卡片，但未指定寬度
  • 此外，由於我們正在顯示完整的卡片，因此我們不要忘記將 childAspectRatio 從 8.0 更改為 8.0/9.0，因為我們需要更多的高度。

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

getHomePageBody(BuildContext context) {
  if (MediaQuery.of(context).orientation == Orientation.portrait)
    return ListView.builder(
      itemCount: _allCities.length,
      itemBuilder: _getListItemUI,
      padding: EdgeInsets.all(0.0),
    );
  else
    return new MyGridView(allCities: _allCities);
}
複製程式碼

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

[譯] Flutter 系列入門教程五：網格

本教程結束

興趣點

請仔細閱讀這些文章。它可能會給你一個你真正需要的指引：

  1. material.io/design/comp…
  2. Github : github.com/thatsalok/F…

Flutter 教程

  1. Flutter Getting Started: Tutorial 1 Basics
  2. Flutter Getting Started: Tutorial 4 ListView

Dart 教程

  1. DART2 Prima Plus — Tutorial 1
  2. DART2 Prima Plus — Tutorial 2 — LIST
  3. DART2 Prima Plus — Tutorial 3 — MAP

歷史

  • 22-July-2018：第一個版本

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

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。

相關文章