GridView佈局初試-Flutter

中看不中用的新手作

• 效果
  
• 源代碼

import 'package:flutter/material.dart';
//每個壁紙的配置（方便批量處理）
Widget netpic(String str){
  return Container(
    //BoxDecoration添加圓角圖片
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10.0),//弧度值
      image: DecorationImage(
        image: NetworkImage(str)
      )
    ),
  );
}
//用GridView排列壁紙排列
class MyGridView extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,//三列
          mainAxisSpacing: 10.0,//主軸間距
          crossAxisSpacing: 10.0,//幅軸間距
          childAspectRatio: 0.56//長寬比
      ),
      children: <Widget>[
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/20200125154145.JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4031(20200125-154126).JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4025(20200125-154040).JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/1F14065D991-4F4C-A2DB-D2996F183A92(20190930-003.JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/BC058F5D-0A-4764-8276-59F809F3A8FF(20190805-043.JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4030(2020012554121).JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4023(202154029).JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/E231DF43-98AB-1407A29E3A1B(20190218-090.JPG"),
        netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_4027(20200125-154058).JPG")
      ],
    );
  }
}
//首頁
class First extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("我的壁紙"),
        backgroundColor: Colors.pinkAccent,//應用欄背景頁
      ),
      //右下角懸浮按鈕
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.pinkAccent,
        child: Icon(Icons.favorite),
        //Navigator.push跳轉
        onPressed: (){
          Navigator.push(context, new MaterialPageRoute(
              builder: (context)=>new Favourite()
          ));
        },
      ),
      //導入壁紙排列
      body: new MyGridView(),
    );
  }
}
//第二頁
class Favourite extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          //應用欄返回按鈕
          //Navigator.pop返回
          leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: (){Navigator.pop(context);}),
          title: Text("我的最愛"),
          backgroundColor: Colors.pinkAccent,
        ),
        backgroundColor: Colors.black,
        body: Center(child: netpic("https://cdn.jsdelivr.net/gh/cnatom/images/images/IMG_1932(20200120-1.JPG"),),
      )
    ;
  }
}
//主函數調用
void main(){
  runApp(new MaterialApp(
    title: "GridView組件",
    home: new First(),
    ));
}