机遇屋-Flutter单一子元素组件

Flutter单一子元素组件

作者：ych

### 1 Container

#### 源码
```
Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })
```
平时使用最多的，也就是padding、color、width、height、margin属性。
属性解析
key：Container唯一标识符，用于查找更新。

alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式。

padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应。

color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果。

decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置。

foregroundDecoration：绘制在child前面的装饰。

width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局。

height：container的高度，设置为double.infinity可以强制在高度上撑满。

constraints：添加到child上额外的约束条件。

margin：围绕在decoration和child之外的空白区域，不属于内容区域。

transform：设置container的变换矩阵，类型为Matrix4。

child：container中的内容widget。

#### 案例1
给Container添加一个背景图片
```
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("Container demo")),
        body: new Container(
          constraints: new BoxConstraints.expand(width: 300,height: 300),
          decoration: new BoxDecoration(
            border: new Border.all(width: 2.0, color: Colors.red),
            color: Colors.grey,
            borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
            image: new DecorationImage(
              image: new AssetImage('graphyics/face.jpg'),
            ),
          ),
          padding: const EdgeInsets.all(8.0),
          alignment: Alignment.center,
          child: new Text('Hello Container',style: TextStyle(color: Colors.red),),
        ))));
```

#### 案例二
```
import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatelessWidget {

@override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("Container demo"),),
      body:Container(
  constraints: new BoxConstraints.expand(
    height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
  ),
  decoration: new BoxDecoration(
    border: new Border.all(width: 2.0, color: Colors.red),
    color: Colors.grey,
    borderRadius: new BorderRadius.all(new Radius.circular(20.0)),
    image: new DecorationImage(
      image: new NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
      centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
    ),
  ),
  padding: const EdgeInsets.all(8.0),
  alignment: Alignment.center,
  child: new Text('Hello World',
    style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
  transform: new Matrix4.rotationZ(0.3),
),
      ),
    );

}
}
```
其中decoration可以设置边框、背景色、背景图片、圆角等属性，非常实用。对于transform这个属性，一般有过其他平台开发经验的，都大致了解，这种变换，一般不是变换的实际位置，而是变换的绘制效果，也就是说它的点击以及尺寸、间距等都是按照未变换前的。

### 2 Padding
Flutter 中很多 Widget 是没有 padding 属 性。这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。
#### 源码
```
const Padding({
    Key key,
    @required this.padding,//间距
    Widget child,//子组件
  }) : assert(padding != null),
       super(key: key, child: child);
```
#### 属性介绍
值|说明
-|-
padding|内间距
child|子组件

#### demo
```
import 'package:flutter/material.dart';

main()=>runApp(MyApp());

class MyApp extends StatelessWidget {

@override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home: Scaffold(appBar: AppBar(title: Text("Padding demo"),),
      body:Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.7,
        children: [
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network("https://www.itying.com/images/flutter/1.png",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network("https://www.itying.com/images/flutter/1.png",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network("https://www.itying.com/images/flutter/1.png",
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network("https://www.itying.com/images/flutter/1.png",
                fit: BoxFit.cover),
          ),
        ],
      ),
    )
,
      ),
    );

}
}
```

### 3 Align
#### Align源码
```
const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child,
  }) : assert(alignment != null),
       assert(widthFactor == null || widthFactor >= 0.0),
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);
```

#### Align属性
属性|说明
-|-
alignment|子组件的对齐方式 Alignment.topCenter垂直靠顶部水平居中对齐 Alignment.topRight垂直靠顶部水平靠右对齐 Alignment.centerLeft垂直居中水平靠左对齐 Alignment.center垂直和水平居中都对齐 Alignment.centerRight垂直居中水平靠右对齐 Alignment.bottomLeft垂直靠底部水平靠左对齐 Alignment.bottomCenter垂直靠底部水平居中对齐 Alignment.bottomRight垂直靠底部水平靠右对齐 Alignment(double,double)组件的中心为原点，取值范围[-1,1],根据取值进行偏移
widthFactor|宽度系数，double
heightFactor|高度系数，double
child|子组件

#### Stack Align结合的demo
```
return Container(
      height: 400,
      width: 400,
      color: Colors.red,
      child: Stack(
        children: [
          Align(
            alignment: Alignment.center,
            child: Icon(Icons.account_circle,size: 40,color: Colors.white,)
          ),
          Align(
              alignment: Alignment.topLeft,
            child: Icon(Icons.cached_outlined,size: 40,color: Colors.white,)
          ),
          Align(
            alignment: Alignment.bottomRight,
            child: Icon(Icons.baby_changing_station,size: 40,color: Colors.white,)
          )
        ],
      ),
    );
```

### 4 Center

### 5 FittedBox

### 6 AspectRatio

### 7 SingleChildScrollView

### 8 FractionallySizedBox

### 9 ConstrainedBox

### 10 Baseline

评论区

先去登录

Flutter单一子元素组件

相关推荐

评论区