flutter 初级入门之图片

 

 

 

 

 

 

全部完整代码：

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'),

          centerTitle: true,

         

        ),

        

        body: HomeContent(),       //内容

      ),

      

      theme: ThemeData(

        primarySwatch: Colors.green      //主题颜色

      ),

      color: Colors.blue,

    );

  }

 

}

 

class HomeContent extends StatelessWidget{

  @override

  Widget build(BuildContext context) {

    // TODO: implement build

    return Center(

    child:  Container(   //Container 类似一个div 一个容器

 

    child: Image.asset("images/a.jpeg"),  //本地图片（2步配置）

    // child: ClipOval(// 直接实现圆形图片，因为ClipOval直接跟width和height有关系

    //   child: Image.network('http://www.ionic.wang/statics/index/images/ionic4.png'),

    // ),

        width: 300.0,  //图片宽度

        height: 300.0,  //图片高度

        // decoration: BoxDecoration(   //图片背景修饰

        // color: Colors.green ,   //背景颜色

        //child: Image.network(    //子组件，引用图片类型，本地图片asset，远程图片network

          

          //"http://www.ionic.wang/statics/index/images/ionic4.png",

          // alignment: Alignment.center,

          // color: Colors.yellow,  //图片颜色

          // colorBlendMode: BlendMode.difference,     //混合模式，颜色混合

          // fit: BoxFit.cover,   //图片显示样式，eg:cover是全容器显示

          // repeat: ImageRepeat.repeatX,   //图片平铺效果

       // ),

 

          ////容器形状，圆角边框 方法一：

          //borderRadius: BorderRadius.all(  //容器形状，圆角边框

          //  Radius.circular(150)

 

          //方法二：

          // borderRadius: BorderRadius.circular(150),

 

          // image: DecorationImage(   //实现图片形状，一下示例为圆形

          //   image: NetworkImage("http://www.ionic.wang/statics/index/images/ionic4.png"),

          //   fit: BoxFit.cover

          //)

 

          

          )

        

      

      );

  

   

  

  }

  

}

 

 

  （本人也是看视频学的，大地老师的视频值得一看）