Flutter 연구 노트-사진 앨범을 만드는 Gridview 그리드 구성 요소

Flutter 연구 노트-Gridview 그리드 구성 요소를 사용하여 사진 앨범
효과 :

GridView는 공식 정의 참조 인 2 차원 그리드 목록을 작성할 수 있습니다.
https://book.flutterchina.club/chapter6/gridview.html
여기에는 두 가지 기본 레이아웃 메서드가 있습니다.
SliverGridDelegateWithFixedCrossAxisCount
이 하위 클래스는 고정 수평 축을 구현합니다. 하위 요소의 수.
SliverGridDelegateWithMaxCrossAxisExtent
이 하위 클래스는 가로 축 하위 요소에 대해 고정 된 최대 길이를 가진 레이아웃 알고리즘을 구현합니다. 오늘 우리는 첫 번째를 소개합니다 : 생성자는 (데이터는 이중 유형입니다) :
SliverGridDelegateWithMaxCrossAxisExtent ({ maxCrossAxisExtent, // 가로 축에있는 하위 요소의 최대 길이 mainAxisSpacing = 0.0, // 주축 요소 간격 crossAxisSpacing = 0.0, // 가로축 간격 childAspectRatio = 1.0, // 요소와 주축의 가로축 사이의 크기 비율 }) gridview가 body에 생성되고 먼저 위와 같이 창 형식을 설정합니다. 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),
         ],
        )
    )
    );
  }
}

효과는 위에서 설명한 것과 같습니다.