Use Flutter based learning 5-19 Image picture components

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/dpl12/article/details/90741510

Today describes how to use the Image Flutter picture components .......

Demo Minamoto码:

import 'package:flutter/material.dart';
//主函数（入口函数）
void main() {
     runApp(MyApp());
}
//声明MyApp类继承-StatelessWidget：具有不可变状态(state)的Widget(窗口小部件).
class MyApp extends StatelessWidget{
  //重写build方法
  @override
  Widget build(BuildContext context) {
    //返回一个material风格的组件
    return MaterialApp(
       title: 'Welcome to Flutter',   
       //Scaffold:实现了基本的 Material 布局,可以理解为一个布局的容器
       home: Scaffold(                //home ： 应用默认所显示的界面 Widget
          appBar: AppBar(
            title: Text('Welcome to Flutter'),
          ),
          //body:当前界面所显示的主要内容
          body: Center(
            //Container（容器控件）,相当于HTML里的<div>标签
            child: Container(
              child: new Image.network(        //加载网络资源图片
                'https://www.baidu.com/img/dong_28db0e2033ff1faf14771bc40ad0a9cd.gif',
                //fit: BoxFit.fill,   //BoxFit.fill:全图显示，图片会被拉伸，并充满父容器。
                color: Colors.white,   //color：是要混合的颜色，如果你只设置color是没有意义的。
                colorBlendMode: BlendMode.difference,   //colorBlendMode:是混合模式，相当于我们如何混合。
                repeat: ImageRepeat.repeat,   //ImageRepeat.repeat : 横向和纵向都进行重复，直到铺满整个画布
              ),
              width: 400.0,
              height: 200.0,
              color: Colors.lightBlue,
            ),
          ),
       ),
       theme: new ThemeData(primaryColor: Colors.red),  // 设置主题颜色
    );
  }
}

Note that knowledge:

1, adding the picture in several ways

Image.asset : images load resources, project resources directory is loaded in the picture, will increase the inclusions volume packaged Once your image, using a relative path.
Image.network : picture of network resources, meaning that you need to join such a network path address some of http://xxxx.xxx.
Image.file : Load local images, is to load local files in the picture, this is an absolute path, nothing to do with the package body.
Image.memory : Load Uint8List resource picture, not that I am currently using a lot, so nothing to say.

We are now to join the network as an example of the picture, a picture in Container join in, the way to set the width and height of the container.

2, provided fit property

fit the picture properties can be controlled stretching and squeezing, which are based on the picture of the parent container, we take a look at these properties.

BoxFit.fill : full map display, images will be stretched, and full of the parent container.
BoxFit.contain : full map display, showing the proportion of the original, there may be a gap.
BoxFit.cover : display may stretch, may cut, full (picture to fill the entire container, not deformation).
BoxFit.fitWidth : full width (full transverse), the stretching may display, may be cut.
BoxFit.fitHeight : full height (vertical full), the display may stretch, may be cut.
BoxFit.scaleDown : effects and contain about the same, but this property is not allowed to display more than the source image size, may not be big small

3, the picture of mixed mode

Picture Mixed Mode (colorBlendMode) and color attributes with the use of color to make the picture change, very much inside the model, the effect is also very rich.

color: color is to be mixed, if you set the color just does not make sense.
colorBlendMode: mixed mode, the equivalent of how we mix.

4, repeat repeat pictures

ImageRepeat.repeat: horizontal and vertical are repeated until the entire canvas covered.
ImageRepeat.repeatX: repeated transverse, longitudinal not be repeated.
ImageRepeat.repeatY: longitudinal repeated, transverse not be repeated.

Run shot:

Use Flutter based learning 5-19 Image picture components

Guess you like