Flutterスタディノート-フォトアルバムを作成するためのGridviewグリッドコンポーネント

フラッタースタディノート-フォトアルバムを作成するためのGridviewグリッドコンポーネント
効果：

GridViewは、公式の定義リファレンスである2次元グリッドリストを作成できます
。https
：
//book.flutterchina.club/chapter6/gridview.html 2つの主要なレイアウトメソッドがあります。SliverGridDelegateWithFixedCrossAxisCount
このサブクラスは、固定水平軸を実装します。サブ要素の数。
SliverGridDelegateWithMaxCrossAxisExtent
このサブクラスは、水平軸サブ要素の最大長が固定されたレイアウトアルゴリズムを実装します。今日は最初のものを紹介します：そのコンストラクターは（データはダブルタイプです）：
SliverGridDelegateWithMaxCrossAxisExtent（{ maxCrossAxisExtent、//横軸のサブ要素の最大長mainAxisSpacing = 0.0、//主軸要素の間隔crossAxisSpacing = 0.0、//横軸の間隔childAspectRatio = 1.0、//要素と主軸の横軸のサイズ比}）グリッドビューが本体に作成され、最初にウィンドウ形式を上記のように設定します。body：GridView（//グリッドを分割しますgridDelegate：SliverGridDelegateWithFixedCrossAxisCount（//横軸の子要素の数を固定crossAxisCount：3、//横軸のサブ要素の数









mainAxisSpacing：2.0、//主軸間隔
crossAxisSpacing：2.0、//水平軸間隔
childAspectRatio：1.0 //子要素の配置率
）、

次に、特定の要素を作成します（ここではImage.networkのネットワークイメージアドレスを使用します）：
children：[
new Image.network（ 'http://img5.mtime.cn/mg/2020/08/14/145018.89856988_285X160X4.jpg'、fit ：BoxFit.cover）、
新しいImage.network（ 'http://img5.mtime.cn/mg/2020/08/14/083852.73752310_285X160X4.jpg',fit:BoxFit.cover）、
新しいImage.network（' http ：//img5.mtime.cn/mg/2020/08/10/120400.47292216.jpg',fit：BoxFit.cover）、
新しいImage.network（ 'http://img5.mtime.cn/mg/ 2020/07 /23/201005.49303255_270X405X4.jpg',fit:BoxFit.cover)、new
Image.network（ 'http://img5.mtime.cn/mg/2020/08/02/162809.52117921_270X405X4.jpg',fit：BoxFit。表紙）、
新しいImage.network（ 'http://img5.mtime.cn/mg/2020/07/24/084255.58952810_270X405X4.jpg',fit:BoxFit.cover）、
new Image.network（ 'http://img5.mtime.cn/mg/2020/07/24/105612.82558632_270X405X4.jpg',fit:BoxFit.cover）、new
Image.network（' http：//img5.mtime .cn / mg / 2020/08/14 / 091552.47653984_285X160X4.jpg '、fit：BoxFit.cover）、
]、
私の写真の場所を参照することもできます。Mtime.comを開きました

。好きな写真を見つけてください。右クリックして[画像のコピー]リンクを選択します。

次に、アドレスをImage.networkに入力します。

コードは次のように表示されます。

import 'package:flutter/material.dart';
void main()=> runApp(MyApp());
class MyApp extends StatelessWidget{
 @override
  Widget build(BuildContext context){
    return MaterialApp(
    title: '开心Flutter Demo',
      home: Scaffold(
        appBar: new AppBar(title:new Text('开心Flutter Demo')),
        body:GridView(   //划分网格
         gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(  //横轴固定数量子元素
           crossAxisCount: 3,          //横轴子元素数量
           mainAxisSpacing: 2.0,        //主轴间距
           crossAxisSpacing: 2.0,       //横轴间距
           childAspectRatio: 1.0         //子元素放置比例
         ),
         children: <Widget>[
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/145018.89856988_285X160X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/083852.73752310_285X160X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/10/120400.47292216.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/23/201005.49303255_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/02/162809.52117921_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/24/084255.58952810_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/07/24/105612.82558632_270X405X4.jpg',fit:BoxFit.cover),
           new Image.network('http://img5.mtime.cn/mg/2020/08/14/091552.47653984_285X160X4.jpg',fit:BoxFit.cover),
         ],
        )
    )
    );
  }
}

効果は上記の通りです。