Flutter 容器类组件

概述

• 容器类组件通常只能接收一个子元素，对其添加一些修饰、变换、限制等。
• 布局类组件可以接收一个或多个子元素，通常只是对子元素进程排序操作。

Container 装饰组件

Container是单容器类型组件，只能有一个子组件，可以用于装饰、定位子组件，如设置背景颜色、形状等。

width & height：可以设置组件的宽高，优先级最高。

constraints：约束条件，也可以指定组件宽高。

color：组件背景颜色。

padding & margin：内边距和外编辑，本质都是通过Padding组件实现的。

decoration：背景装饰，与color属性互斥。

Container(
    width: 100,
    height: 50,
    color: Colors.blue,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(10),
    alignment: Alignment.center,
    child: Text("hello world"),
)

Container(
    child: Text("hello Container"),
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(20)),
        color: Colors.red.shade50,
        border: Border.all(
            color: Colors.red.shade900,
            width: 10,
        ),
    ),
)

Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
        image: DecorationImage(
            image: AssetImage(
                "images/avatar.jpg",
            ),
            fit: BoxFit.cover,
        ),
        shape: BoxShape.circle,
        border: Border.all(
            color: Colors.red.shade900,
            width: 2,
        ),
    ),
)

Container(
    margin: EdgeInsets.all(50),
    constraints: BoxConstraints.tightFor(width: 200, height: 150),
    decoration: BoxDecoration(
        gradient: RadialGradient(
            colors: [Colors.blue.shade800, Colors.blue.shade200],
            center: Alignment.center,
            radius: 0.5,
        ),
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 2,
            ),
        ],
    ),
    transform: Matrix4.rotationZ(0.2),
    transformAlignment: Alignment.center,
    alignment: Alignment.center,
    child: Text("hello world"),
)

SizedBox 固定宽高组件

Column(
    children: [
        SizedBox(
            height: 60,
            width: 150,
            child: Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text("hello world"),
            ),
        ),
        SizedBox(height: 30),
        SizedBox.fromSize(
            size: Size(150, 60),
            child: Container(
                color: Colors.red,
                alignment: Alignment.center,
                child: Text("hello flutter"),
            ),
        ),
    ],
)

FractionallySizedBox 相对父容器尺寸

Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: FractionallySizedBox(
        widthFactor: 0.8,
        heightFactor: 0.2,
        child: Container(color: Colors.red),
    ),
)

Padding 内边距组件

设置组件内边距。

EdgeInsets

EdgeInsets.all()：四个方向内边距使用相同的内边距。

EdgeInsets.fromLTRB()：可以同时设置不同的内边距。

EdgeInsets.symmetric()：同时设置水平方向或垂直方向的内边距。

EdgeInsets.only()：具体设置某个方向的内边距。

Container(
    color: Colors.red,
    child: Padding(
        padding: EdgeInsets.all(10),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.green,
    child: Padding(
        padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
        child: Text("hello world"),
    ),
),
Container(
    color: Colors.blue,
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        child: Text("hello world"),
    ),
)

AspectRatio 宽高比组件

AspectRatio是固定宽高比的组件，aspectRatio属性是宽高比。

Container(
    width: 300,
    height: 300,
    alignment: Alignment.center,
    color: Colors.red,
    child: AspectRatio(
        aspectRatio: 2 / 1,
        child: Container(color: Colors.blue),
    ),
)

DecoratedBox 装饰

DecoratedBox可以在子组件绘制之前或之后绘制一些装饰，如背景、边框、渐变等。

DecoratedBox

child：设置子元素。

position：设置背景装饰或前景装饰。

• DecorationPosition.background：背景装饰
• DecorationPosition.foreground：前景装饰

decoration：需要绘制的装饰。

BoxDecoration

属于Decoratin的子类，用于装饰元素的绘制，一般直接用BoxDecoration类。

color：颜色。

gradient：渐变色。

borderRadius：圆角。

boxShadow：阴影，可以添加多个。

shape：形状。

• BoxShape.rectangle：矩形
• BoxShape.circle：圆形

DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("登陆"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        borderRadius: BorderRadius.circular(3),
        shape: BoxShape.rectangle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
),
SizedBox(height: 10),
DecoratedBox(
    child: Padding(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 30),
        child: Text("登陆"),
    ),
    position: DecorationPosition.background,
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Colors.green, Colors.blue],
        ),
        shape: BoxShape.circle,
        boxShadow: [
            BoxShadow(
                color: Colors.grey,
                offset: Offset(2, 2),
                blurRadius: 4,
            ),
        ],
    ),
)

Transform 变换

Transform可以对子元素添加一些特效。

Transform的变化是在绘制阶段，而不是布局阶段，所以子组件所占用的空间大小的都是不变的。

平移

DecoratedBox(
    child: Transform.translate(
        offset: Offset(10, 10), //默认原点左上角，向右平移10，向下平移10
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

旋转

DecoratedBox(
    child: Transform.rotate(
        angle: math.pi / 2, //选择90度
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

缩放

DecoratedBox(
    child: Transform.scale(
        scale: 2,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

倾斜

Container(
    color: Colors.black,
    child: Transform(
        alignment: Alignment.topRight,
        transform: Matrix4.skewY(0.3),
        child: Container(
            padding: EdgeInsets.all(8),
            color: Colors.red,
            child: Text("  hello transform!  "),
        ),
    ),
)

RotatedBox

RotatedBox与Transform.rotate()功能类似，但是RotatedBox是变化是在layout阶段，所以会影响子组件的位置和大小。

DecoratedBox(
    child: RotatedBox(
        quarterTurns: 1,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

Clip 剪裁

Flutter提供了一些剪裁工具，用于对组件的剪裁。

ClipOval：剪裁为圆形。

ClipRect：剪裁为矩形。

ClipRRect：剪裁为圆角矩形。

avatar, //原图对比
ClipOval(
    child: avatar,
),
ClipRect(
    child: avatar,
),
ClipRRect(
    child: avatar,
    borderRadius: BorderRadius.circular(10),
),

自定义剪裁

getClip()：设置剪裁区域。

shouldReclip()：是否需要重新剪裁。

DecoratedBox(
    decoration: BoxDecoration(color: Colors.red),
    child: ClipRect(
        clipper: MyClipper(),
        child: avatar,
    ),
)

class MyClipper extends CustomClipper<Rect> {
    @override
    Rect getClip(Size size) {
        return Rect.fromLTWH(0, 0, 30, 30);
    }

    @override
    bool shouldReclip(covariant CustomClipper<Rect> oldClipper) {
        return false;
    }
}

FittedBox

FittedBox可以处理子元素大小超过父组件的大小的情况。

Text("原始"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: Container(
        width: 60,
        height: 70,
        color: Colors.green,
    ),
),
SizedBox(height: 10),
Text("BoxFit.none"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: FittedBox(
        fit: BoxFit.none,
        child: Container(
            width: 60,
            height: 70,
            color: Colors.green,
        ),
    ),
),
SizedBox(height: 10),
Text("BoxFit.contain"),
Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: FittedBox(
        fit: BoxFit.contain,
        child: Container(
            width: 60,
            height: 70,
            color: Colors.green,
        ),
    ),
)

redux 的 React 绑定库包含了 容器组件和展示组件相分离 的开发思想。明智的做法是只在最顶层组件（如路由操作）里使用 Redux。其余内部组件仅仅是展示性的，所有数据都通过 props 传入。

不区分容器和展示组件的情况：

// CommentList.js
class CommentList extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <ul> {this.state.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

可用性：CommentList不可以复用

那么来看下分离的情况：

// CommentListContainer.js
class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = { comments: [] }
  }
  componentDidMount() {
    $.ajax({
      url: "/my-comments.json",
      dataType: 'json',
      success: function(comments) {
        this.setState({comments: comments});
      }.bind(this)
    });
  }
  render() {
    return <CommentList comments={this.state.comments} />;
  }
}


// CommentList.js
class CommentList extends React.Component {
  constructor(props) {
    super(props);
  }
  render() { 
    return <ul> {this.props.comments.map(renderComment)} </ul>;
  }
  renderComment({body, author}) {
    return <li>{body}—{author}</li>;
  }
}

这样就做到了数据提取和渲染分离，CommentList可以复用，CommentList可以设置PropTypes判断数据的可用性

二者的区别：
容器组件和展示组件分离的好处：

1. 展示和容器更好的分离，更好的理解应用程序和UI
2. 重用性高，展示组件可以用于多个不同的state数据源重用性高，展示组件可以用于多个不同的state数据源