Flutter之ConstrainedBox、SizedBox、UnconstrainedBox（尺寸限制類(lèi)容器）

1 ConstrainedBox、SizedBox、UnconstrainedBox介紹

1)、ConstrainedBox用于對(duì)子組件添加額外的約束。例如，如果你想讓子組件的最小高度是80像素

      ConstrainedBox({
        Key key,
        @required this.constraints,
        Widget child,
      })

我們可以看到這里有個(gè)constraints

  final BoxConstraints constraints;

    class BoxConstraints extends Constraints {
      /// Creates box constraints with the given constraints.
      const BoxConstraints({
        this.minWidth = 0.0,
        this.maxWidth = double.infinity,
        this.minHeight = 0.0,
        this.maxHeight = double.infinity,
      }) : assert (minWidth != null),
           assert (maxWidth != null),
           assert (minHeight != null),
           assert (maxHeight != null);

我們可以看到BoxConstraints繼承Constraints，然后一些屬性設(shè)置。

有多重ConstrainedBox限制時(shí)，對(duì)于minWidth和minHeight來(lái)說(shuō)，是取父子中相應(yīng)數(shù)值較大的

 

2)、SizedBox：用于給子元素指定固定的寬高

3)、UnconstrainedBox：不會(huì)對(duì)子組件產(chǎn)生任何限制，它允許其子組件按照其本身大小繪制

一般用來(lái)去掉父約束

 
2 測(cè)試代碼

測(cè)試1、

      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  // Here we take the value from the MyHomePage object that was created by
                  // the App.build method, and use it to set our appbar title.
                  title: Text('hello flutter'),
                ),
                body: Center(
                  child: ConstrainedBox(
                      constraints: BoxConstraints(
                          minWidth: double.infinity,
                          minHeight: 100
                      ),
                    child: Container(
                        width: 50,
                        height: 50,
                        color: Colors.green,
                    ),
                  ),
                ),
              ),
          );
      }
    }

測(cè)試2、

      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('hello flutter'),
                ),
                body: Center(
                  child: ConstrainedBox(
                      constraints: BoxConstraints(
                          minWidth: 200,
                          minHeight: 100
                      ),
                    child: ConstrainedBox(
                      constraints: BoxConstraints(
                          minWidth: 100,
                          minHeight: 200
                      ),
                      child:  Container(
                        width: 50,
                        height: 50,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ),
              ),
          );
      }
    }

 

測(cè)試3、

     
      @override
      Widget build(BuildContext context) {
          return MaterialApp(
              title: 'open url',
              home: Scaffold(
                appBar: AppBar(
                  title: Text('hello flutter'),
                ),
                body: Center(
                  child: ConstrainedBox(
                      constraints: BoxConstraints(
                          minWidth: 200,
                          minHeight: 100
                      ),
                    child: UnconstrainedBox(
                      child: ConstrainedBox(
                        constraints: BoxConstraints(
                            minWidth: 50,
                            minHeight: 50
                        ),
                        child: Container(
                          width: 10,
                          height: 15,
                          color: Colors.red,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
          );
      }
    }
 
3 運(yùn)行效果

 



作者：chen.yu
深信服三年半工作經(jīng)驗(yàn)，目前就職游戲廠商，希望能和大家交流和學(xué)習(xí),
微信公眾號(hào)：編程入門(mén)到禿頭 或掃描下面二維碼
零基礎(chǔ)入門(mén)進(jìn)階人工智能(鏈接)