在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

1、Container介紹

我們先看它的構(gòu)造方法

      Container({
        Key key,
        this.alignment,
        this.padding, //容器內(nèi)補(bǔ)白，屬于decoration的裝飾范圍
        Color color, // 背景色
        Decoration decoration, // 背景裝飾
        Decoration foregroundDecoration, //前景裝飾
        double width,//容器的寬度
        double height, //容器的高度
        BoxConstraints constraints, //容器大小的限制條件
        this.margin,//容器外補(bǔ)白，不屬于decoration的裝飾范圍
        this.transform, //變換
        this.child,
        this.clipBehavior = Clip.none,
      })

Container是一個(gè)組合類容器，它本身不對(duì)應(yīng)具體的RenderObject，它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等組件組合的一個(gè)多功能容器，所以我們只需通過(guò)一個(gè)Container組件可以實(shí)現(xiàn)同時(shí)需要裝飾、變換、限制的場(chǎng)景

 
2、代碼測(cè)試

代碼測(cè)試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)),
                ),
              ),
          );
      }

代碼測(cè)試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)),
                  ),
                )
              ),
          );
      }

代碼測(cè)試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)),
                ),
              ),
          ),
        );
      }

代碼測(cè)試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、運(yùn)行結(jié)果

4、總結(jié)

    Container(
      margin: EdgeInsets.all(20.0), //容器外補(bǔ)白
      color: Colors.orange,
      child: Text("Hello world!"),
    ),
    Container(
      padding: EdgeInsets.all(20.0), //容器內(nèi)補(bǔ)白
      color: Colors.orange,
      child: Text("Hello world!"),
    ),

等價(jià)下面的代碼

    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!"),
      ),
    ),