Flutter04-2020圖片加載

目錄

• 遠程圖片
• 圓型圖片設置
• 本地圖片

一、遠程圖片

代碼展示：

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}
//自定義組件
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     home: Scaffold(
       appBar: AppBar(
         title: Text("flutter demo")
       ),
       body: HomeContent()
     )
   );
  }
  
}

//定義背景顏色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
     child: Container(
       child: Image.network(
         "http://qiniu.xingheaoyou.com/1.jpg",
         alignment: Alignment.topRight,//圖片顯示左上角

         color:Colors.blue,//圖片顏色
         colorBlendMode: BlendMode.screen,//圖片混合模式，會和color進行疊加
//         fit:BoxFit.cover,//可能拉伸，可能剪切，充滿整個容器，還不變形，
//       fit:BoxFit.fill,//充滿屏幕，會變形
//       fit:BoxFit.contain//默認是contain, fitWidth 橫向充滿， fitHeight 縱向充滿
       fit:BoxFit.cover,//覆蓋全部，用的最多
//         repeat: ImageRepeat.repeat, //平鋪圖片，一般默認是一張，這裏設置會出現很多張

       ),//展示網絡圖片地址
       width: 300,
       height: 300,
       decoration: BoxDecoration(
         color: Colors.yellow
       ),
     )
   );
  }

}

效果圖：

二、圓型圖片設置

代碼：

//定義背景顏色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
    width: 300,
    height: 300,
    decoration: BoxDecoration(
      color: Colors.yellow,
//圓型圖像方法一
//      borderRadius: BorderRadius.all(
//        Radius.circular(150)
//      ),
//圓型圖像方法二
//    borderRadius: BorderRadius.circular(150),
    
    //加載圖片
        image: DecorationImage(
          image: NetworkImage('http://qiniu.xingheaoyou.com/1.jpg'),
          fit: BoxFit.cover
        )
    ),
  ),

   );
  }

}

方法三設置圓形圖片：

//定義背景顏色decoration
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
      child: ClipOval(
        child: Image.network(
            'http://qiniu.xingheaoyou.com/1.jpg',
            height:100,
            width: 100,  //如果不設置寬高就會根據圖片變形，可能是橢圓，設置固定的話，可以確認是一個圓形
          fit:BoxFit.cover, 

        ),

      ),
    ),

   );
  }

}

三、本地圖片加載

1.首先需要在目錄裏面建images,而且固定的2.0x, 3.0x,4.0x文件夾

然後，將你需要的圖片，要在這個文件中配置，目前是你每一個你要用的都要這樣寫。

//加載本地的圖片
class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
   return  Center(
    child: Container(
     child: Image.asset(
         'images/1.png',
         fit:BoxFit.cover
     ),
      width:300,
      height: 300,
    ),


   );
  }

}