Flutter This part describes the use of the container assembly Container .........
Container container assembly Introduction:
Container (container controls) in the control Flutter is frequently used, it is equivalent to us in the HTML <div>tags. A container for placing the widget, there are padding, margin, location, size, and other parameters.
Specifically the following parameters:
- alignment: Alignment Alignment
- padding: padding EdgeInsets
- margin: Margin EdgeInsets
- color：
- decoration：
- foregroundDecoration:
- width: contains padding
- height: contains padding
- constraints：BoxConstraints：
- transform：
- child: the child view, can be null, is an empty view
Quiet and number, Demo code is as follows:
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 Text('Hello Fultter',style: TextStyle(fontSize: 40.0,color: Colors.white)),
//alignment这个属性针对的是Container内child的对齐方式，也就是容器子内容的对齐方式，并不是容器本身的对齐方式。
alignment: Alignment.topLeft,
width: 500.0,
height: 400.0,
//color: Colors.lightBlue,
//padding的属性就是一个内边距,指的是Container边缘和child内容的距离
padding: const EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 0.0),
//const:常量
margin: const EdgeInsets.all(10.0),
//margin是外边距，只的是container和外部元素的距离
//decoration是 container 的修饰器，主要的功能是设置背景和边框。
//颜色渐变，这时候需要使用BoxDecoration这个类
decoration: new BoxDecoration(
//gradient：渐变
gradient: const LinearGradient( //LinearGradient：线性渐变
colors: [Colors.lightBlue,Colors.purple,Colors.greenAccent]
),
border: Border.all(width: 5.0,color: Colors.red),//边框设置
),
),
),
),
theme: new ThemeData(primaryColor: Colors.red), // 设置主题颜色
);
}
}Note that knowledge:
1, Alignment property
In fact, the role of the container is to facilitate our layout, good Flutter also made this point, let's look at container properties Alignment.
This property is for the child within the Container alignment, the alignment of the container is sub-content, not the container itself alignment.
As a first effect: the establishment of a container, then add a paragraph of text within a container Hello Flutter, and let it according to the top left-justified.
It is of course also the alignment of the following categories:
bottomCenter: The lower center alignment.botomLeft: The lower left-aligned.bottomRight: The lower right-aligned.center: Center aligned vertically and horizontally.centerLeft: Left lateral longitudinal center-aligned.centerRight: Longitudinal center transverse ranks right-aligned.topLeft: Top left aligned.topCenter: Top center alignment.topRight: Top Left aligned.
2, width and height set width, height and color properties
Set width, height and color properties are relatively easy, as long as the property name is added after the floating-point number can be, for example, to set the width is 500, 400 is high, a bright blue color.
3, padding properties
padding property is a padding, and front-end technology that you use CSS in the paddingform of the same, referring to the distance from the edge of Container and child content. Usage is as follows:
- EdgeInsets.fromLTRB (10,10,10,10), L represents the left margin (left abbreviation), T indicates the top margin (Top abbreviation), R represents the right margin (right abbreviation), B represents a bottom margin (bottom abbreviation), four values can be written separately;
- EdgeInsets.all (10), both vertical and horizontal margins 10;
- EdgeInsets.only (left: 10, right: 5, top: 10, bottom: 10), the margin value can be specified in four directions, respectively, if only the margin, can be written EdgeInsets.only (top: 10);
- EdgeInsets.symmetric (vertical: 20, horizontal: 10), you can specify the vertical and horizontal margins can also specify the margins vertical or horizontal direction alone. The margin only in the vertical direction, can be written EdgeInsets.symmetric (vertical: 20);
- EdgeInsets.fromWindowPadding (), to create a window filled with a given matching insets. Specific usage is not known, the first parameter is given the widget windowpadding, the second is the resolution of the screen;
4, margin properties
Will set the padding property, margin becomes very easy, because the method is substantially the same. But the margin is from the outside, only the distance container and external elements. Now take container outside the margin to 10 units. And use the same padding properties.
5, decoration property
decorationThe container is modified, the main function is to set the background and border.
For example, you need to add a background gradient, this time need to use BoxDecoration this class, note that if you set decoration, would not have set the color attribute, because this conflict. Parameters are as follows:
this.color,// 颜色，如果这个颜色指定了，最外层的颜色就不能用了，否则会报错，二者不可兼容。
this.image,// 背景图片
this.border,// 边框
this.borderRadius,// 边框圆角
this.boxShadow,// 阴影
this.gradient,// 渐变，在图片之下展示，如果指定了渐变色，color属性就没用了
this.backgroundBlendMode, // 混合模式应用于框的[颜色]或[渐变]背景,如果没有颜色或者渐变色，这个属性就没有效果
this.shape = BoxShape.rectangle,// 这个有两个值，一个是方形，一个是圆形（circle），
BoxShape.rectangle和RoundedRectangleBorder是一样的，CircleBorder和BoxShape.circle是一
样的效果，但是Container的shape只能用BoxShape.rectangle、BoxShape.circle是这两种，
而RoundedRectangleBorder、CircleBorder目前是用在Material上的，
因为Container的shape是继承自 BoxBorder的，而Material的shape是继承自ShapeBorder，
虽然BoxBorder也是继承ShapeBorder的
5.1 shape visual style, BoxShape.circle circular pattern, BoxShape.rectangle square pattern;
5.2 borderRadius border radius, has the following wording:
new BorderRadius.all(Radius.circular(4)) // 四个圆角都是半径为4
new BorderRadius.circular(4), // 四个圆角都是半径为4,和上面的效果是一样的
new BorderRadius.horizontal( left: Radius.circular(10)), //左边的两个角的半径为10
new BorderRadius.horizontal(left: Radius.circular(10), right: Radius.circular(4)),//左边的两个角半径为10，右侧两个角半径为4
new BorderRadius.vertical( top: Radius.circular(6)), //上边两个角半径为6
new BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(4),
bottomLeft: Radius.circular(6),
bottomRight: Radius.circular(20)
), //坐上角半径为10，右上角4，左下角为6，右下角为20
5.3 boxShadow shadow that is BoxShadow array: shading 4 parameters;
BoxShadow(
color: Colors.green, //阴影的颜色
offset: Offset(50, 100), //偏移量，Offset第一个参数为x轴的偏移量，正值向右，负值向左，第二个参数是y轴的偏移量，正值向下，负值向上
blurRadius: 20, //这个是高斯模糊的半径，半径越大阴影越模糊，半径越小阴影越清晰
spreadRadius: 10) //这个扩散的半径，半径越大阴影面积越大，值越小阴影面积越小Run shot:
