Flutter之Container

女爷i 2021-09-24 15:56 406阅读 0赞

## 1、Container介绍 ##

我们先看它的构造方法

Container({
        Key key,
        this.alignment,
        this.padding, //容器内补白，属于decoration的装饰范围
        Color color, // 背景色
        Decoration decoration, // 背景装饰
        Decoration foregroundDecoration, //前景装饰
        double width,//容器的宽度
        double height, //容器的高度
        BoxConstraints constraints, //容器大小的限制条件
        this.margin,//容器外补白，不属于decoration的装饰范围
        this.transform, //变换
        this.child,
        this.clipBehavior = Clip.none,
      })

Container是一个组合类容器，它本身不对应具体的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器，所以我们只需通过一个Container组件可以实现同时需要装饰、变换、限制的场景

## 2、代码测试 ##

代码测试1、

@override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('hello flutter'),
                ),
                body: Container(
                   margin: EdgeInsets.only(top: 50, left: 50),
                   constraints: BoxConstraints.tightFor(width: 200, height: 150),
                   decoration: BoxDecoration(
                        gradient: RadialGradient( //背景径向渐变
                            colors: [Colors.red, Colors.orange],
                            center: Alignment.topLeft,
                            radius: .98
                        ),
                        borderRadius:BorderRadius.all(Radius.circular(5)),
                        boxShadow: [ //卡片阴影
                          BoxShadow(
                              color: Colors.black54,
                              offset: Offset(2.0, 2.0),
                              blurRadius: 4.0
                          )
                        ]
                   ),
                   alignment: Alignment.center,
                   child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
                ),
              ),
          );
      }

代码测试2、

@override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('hello flutter'),
                ),
                body: Padding(
                  padding: EdgeInsets.all(30),
                  child: DecoratedBox(
                    decoration: BoxDecoration(
                       color: Colors.blue
                    ),
                    child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
                  ),
                )
              ),
          );
      }

代码测试3、

@override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'open url',
          home: Scaffold(
              appBar: AppBar(
                title: Text('hello flutter'),
              ),
              body: DecoratedBox(
                decoration: BoxDecoration(
                  color: Colors.blue
                ),
                child: Padding(
                   padding: EdgeInsets.all(40),
                   child: Text("chenyu", style: TextStyle(color: Colors.white, fontSize: 40.0)),
                ),
              ),
          ),
        );
      }

代码测试4、

@override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'open url',
          home: Scaffold(
              appBar: AppBar(
                title: Text('hello flutter'),
              ),
              body: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Text("chenyu1"),
                  Text("chenyu2"),
                  Container(
                    margin: EdgeInsets.all(20),
                    color: Colors.red,
                    child: Text("chenyu3", style: TextStyle(fontSize: 40, color: Colors.white)),
                  ),
                  Container(
                    padding: EdgeInsets.all(20),
                    color: Colors.red,
                    child: Text("chenyu4", style: TextStyle(fontSize: 40, color: Colors.white)),
                  ),
                ],
              ),
          ),
        );
      }

## 3、运行结果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 3][]

## 4、总结 ##

Container(
      margin: EdgeInsets.all(20.0), //容器外补白
      color: Colors.orange,
      child: Text("Hello world!"),
    ),
    Container(
      padding: EdgeInsets.all(20.0), //容器内补白
      color: Colors.orange,
      child: Text("Hello world!"),
    ),

等价下面的代码

Padding(
      padding: EdgeInsets.all(20.0),
      child: DecoratedBox(
        decoration: BoxDecoration(color: Colors.orange),
        child: Text("Hello world!"),
      ),
    ),
    DecoratedBox(
      decoration: BoxDecoration(color: Colors.orange),
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Text("Hello world!"),
      ),
    ),

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70]: /images/20210923/7785a5b6288b47ba8d451bb41d3e69c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 1]: /images/20210923/b46cfbab92724c6eb44d4e169a562e07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 2]: /images/20210923/06eea4f27f59443da920ef90a7e8fcdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEwNjg3MDI_size_16_color_FFFFFF_t_70 3]: /images/20210923/37198e4372f4462287da6dd234ed145b.png