Flutter study notes (10) - container components, assemblies Flutter picture study notes (10) - container components, assemblies Flutter picture study notes (9) - Components Widget

For reprint, please indicate the source: Flutter study notes (10) - container components, assemblies pictures

Previous Flutter study notes (9) - Widget components we talk about a very important concept in the Flutter "everything is component" in the Flutter, all of the elements chosen by components, such as our favorite text, pictures, buttons, animations and so on, then talk about the types of components Flutter most commonly used.

• The container assembly

Component container (Container) can be understood as the RelativeLayout like Android or LinearLayout, in which you can place you want to control layout elements to form the final page layout you want. Of course, the container assembly Flutter in as a "container", there must be some give us some attribute to components within the constraints of our container, following brief description of some common attributes and container components (Container) of:

Property name	Types of	Explanation
key	Key	Container unique identifier is used to find updates
alignment	AlignmentGeometry	Its child control mode, if the parent node Container Container size or larger than the size of the Child, this property settings are in effect, there are many alignment
padding	EdgeInsetsGeometry	Blank area inside the Decoration, if there are child then, child located inside padding
color	Color	Container used to set the background color, if foregroundDecoration set, it may obscure color effect
decoration	Decoration	Draw back child decoration, Decoration set up, then it can not set the color attribute, otherwise it will error, this time should be set in Decoration in color
foregroundDecoration	Decoration	Draw in front of the child decor
width	double	Container width setting double.infinity can support full force in the width
height	double	Container height is set to double.infinity can force stays at full height
constraints	BoxConstraints	Add to additional constraints on child
margin	EdgeInsetsGeometry	Decoration and child around the outside of the blank area, does not belong to the content area
transform	Matrix4	Container provided transformation matrix type Matrix4
child	Widget	Container content in the Widget

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Note: The difference is that the padding and margin, padding is included in the content, while the margin is outside the border, then set the click event, padding region will respond, and the margin area will not respond.

Write a simple example, to experience the container assembly Container, mainly to add a border and background, sample code as follows:

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '容器组件demo',
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            //添加边框装饰效果
            decoration: BoxDecoration(
              color: Colors.blue,
              border: new new Border.all ( 
                width: 10 , // border thickness 
                Color: Colors.amberAccent // border color 
              ), 
              borderRadius: const BorderRadius.all ( const Radius.circular ( . 5 )) // border fillet 
            ), 
            Child: the Text ( 
              ' Flutter Container Demo ' , 
              textAlign: TextAlign.center, 
              style: the TextStyle (the fontSize: 20 is ), 
            ), 
          ), 
        ), 
      ), 
    ); 
  } 
}

 

　Page shots are as follows:

Explain the above code, is very simple, a container assembly is placed and a text in a body assembly, a container assembly container wide set high, the color of the background color, border, the border fillet, border thickness and border and then put in a container container assembly text, and the text set of alignment, and font size.

See page Some may ask, why this container will be in the middle of the page it? This is because the body of the content attribute set for the center center.

Simply put optional value attribute points such as textAlign (text alignment), BorderRadius (rounded), TextStyle (font style), the most direct or let everyone look at the screenshots, as follows:

We can see from the prompt, textAlign (text alignment) with left justified, right justified, center, etc., BorderRadius (fillet) has on the upper right, upper left, lower right, lower left, individually, provided with rounded corners, the TextStyle ( font style) there is color, size, line height, shadow, thickness, etc. property, where we not setting them up, interested students can try it yourself.

Container Summary:

To be honest this is the first time I started to write a simple interface Flutter Demo, as an Android programmer is concerned, the feeling is not very accustomed to, but fortunately I have weex development experience, has written many pages vue, in fact, Flutter written inside the page is nested one level of the child, the accumulation of a page with numerous child, now write Demo is very simple, do not know the future complex pages, and will not put their nest ignorant ..... ..

• Pictures components

Pictures components (Image) is a display image components, Image components have multiple constructors

　　1.new Image: Capturing images from ImageProvider

　　2.new Image.asset：加载资源图片

　　3.new Image.file：加载本地图片文件

　　4.new Image.newwork：加载网络图片

　　5.new Image.memory：加载Uint8List资源图片

 

Image组件属性及描述

属性	类型	说明
image	ImageProvider	抽象类，需要自己实现获取图片数据的操作
width/heyght	double	Image显示区域的宽度和高度，这里需要把Image和图片两个东西区分开，图片本身有大小，Image Width是图片的容器，本身也有大小，宽度和高度的配置通常和fit属性配合使用
fit	BoxFit	图片填充模式，具体取值见下一个表
color	Color	图片颜色
colorBlendMode	BlendMode	在对图片进行手动处理的时候，可能用到图层混合，如改变图片的颜色。此属性可以对颜色进行混合处理。
alignment	Alignment	控制图片的摆放位置，比如图片放置在右下角则为Alignment.BottomRight
repeat	ImageRepeat	此属性可以设置图片的重复模式，noRepeat为不重复，Repeat为x和y方向重复，repeatX为x方向重复，repeatY为y方向重复
centerSlice	Rect	当图片需要被拉伸显示时，centerSlice定义的举行区域会被拉伸，可以理解成我们在图片内部定义一个9个点文件用作拉伸，9个点为上、下、左、右、上中、下中、左中、右中、正中
matchTextDirection	bool	matchTextDirection和Directionality配合使用，TextDirection有两个值，分别为TextDirection.ltr从左向右展示图片与TextDirection.rtl从右向左展示图片
gaplessPlayback	bool	当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留，值为true则保留，值为false则不保留，直接空白等待下一张图片加载

 

BoxFit取值及描述

取值	描述
BoxFit.fill	全图显示，显示可能拉伸，充满
BoxFit.contain	全图显示，显示原比例，不需充满
BoxFit.cover	显示可能拉伸，可能裁剪，充满
BoxFit.fitWidth	显示可能拉伸，可能裁剪，宽度充满
BoxFit.fitHeight	显示可能拉伸，可能裁剪，高度充满
BoxFit.none	原始大小
BoxFit.scaleDown	效果和BoxFit.contain差不多，但是此属性不允许显示超过源图片大小，即可小不可大

 

 

 

 

 

 

 

 

 

 

 

 

按照惯例附上一段Demo：

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图片组件Demo',
      home: new Center(
        child: Container(
          color: Colors.white,
          child: new Image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
          ),
        ),
      ),
    );
  }
}

 

按照惯例附上效果截图：

上面可以看出，我给从网络上获取的图片设置的宽、高分别为200，但是我并没有设置图片的填充模式，那么我把填充模式设置为fitHeight会怎么样呢？

import 'package:flutter/material.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图片组件Demo',
      home: new Center(
        child: Container(
          color: Colors.white,
          child: new Image.network(
            'https://flutter.io/images/homepage/header-illustration.png',
            width: 200,
            height: 200,
            fit: BoxFit.fitHeight,
          ),
        ),
      ),
    );
  }
}

 

 

 可以看的出来，高度充满了，但是水平方向被拉伸了。

其他的图片属性以及填充方式的属性，我就不一一给大家演示了，我尝试了很多种组合，发现还挺有意思的，希望大家也能多多的进行尝试！

 

下一章节：Flutter学习笔记（11）--文本组件、图标及按钮组件