当前位置：网站首页>[flutter topic] 66 diagram basic constraints box (I) yyds dry goods inventory

[flutter topic] 66 diagram basic constraints box (I) yyds dry goods inventory

2022-06-29 03:09:00 【A Ze young monk】

In the process of learning , In order to adjust or adapt Widget Big hour , Will be set Widget Or nest some constraints Widget; Let's learn about this series of constraints Box;

SizedBox

Source code analysis

class SizedBox extends SingleChildRenderObjectWidget {
  //  Create a fixed size constraint Box
  const SizedBox({ Key key, this.width, this.height, Widget child })
    : super(key: key, child: child);

  //  Create a constraint of the maximum size allowed by the parent class Box
  const SizedBox.expand({ Key key, Widget child })
    : width = double.infinity,
      height = double.infinity,
      super(key: key, child: child);

  //  Create the constraint of the minimum size allowed by the parent class Box
  const SizedBox.shrink({ Key key, Widget child })
    : width = 0.0,
      height = 0.0,
      super(key: key, child: child);

  //  Create a constraint of the specified size Box
  SizedBox.fromSize({ Key key, Widget child, Size size })
    : width = size?.width,
      height = size?.height,
      super(key: key, child: child);
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.

Analyze the source code to know ,SizeBox Inherited from SingleChildRenderObjectWidget Only sub Child The storage of does not provide update logic ; And SizedBox Provides a variety of ways to use , Try the dishes one by one ;

Case study

1. SizedBox({ Key key, this.width, this.height, Widget child })

SizedBox Customizable width and height, When limiting width and height , Son Widget No matter how wide or high , Are filled by default ; By setting double.infinity Fill in the parent class Widget Wide and high , Note that there should be restrictions on the parent class at this time , It's not infinite width and height ; When width and height Not set time , According to Widget Size display ;

return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.teal.withOpacity(0.4)));
return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.red.withOpacity(0.4), width: 200.0, height: 200.0));
return SizedBox(width: 100.0, height: 100.0, child: Container(color: Colors.pink.withOpacity(0.4), width: 50.0, height: 50.0));
return SizedBox(width: double.infinity, height: 100.0, child: Container(color: Colors.blueAccent.withOpacity(0.4)));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Android Vegetable bird

2. SizedBox.expand({ Key key, Widget child })

.expand It's a convenient way , Default width and height Are all double.infinity, Fill the entire parent class Widget;

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _0 Based on learning Flutter_02

3. SizedBox.shrink({ Key key, Widget child })

.shrink It's also a convenient way , but width and height Are all 0.0, Regardless of son Widget How many settings are not displayed ; I haven't figured out the application scenario of this method yet ;

4. SizedBox.fromSize({ Key key, Widget child, Size size })

.fromSize The convenient method is basically the same as the basic construction method , It's just width and height from Size encapsulation , This method can achieve the same effect as the basic method ;

return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.teal.withOpacity(0.4)));
return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.red.withOpacity(0.4), width: 200.0, height: 200.0));
return SizedBox.fromSize(size: Size(100.0, 100.0), child: Container(color: Colors.pink.withOpacity(0.4), width: 50.0, height: 50.0));
return SizedBox.fromSize(size: Size(double.infinity, 100.0), child: Container(color: Colors.blueAccent.withOpacity(0.4)));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Android Vegetable bird _03

ConstrainedBox

Source code analysis

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

class BoxConstraints extends Constraints {
  //  Creates a frame size with the specified constraint size 
  const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  });

  //  Create the frame size with the specified size only 
  BoxConstraints.tight(Size size)
    : minWidth = size.width,
      maxWidth = size.width,
      minHeight = size.height,
      maxHeight = size.height;

  //  Creates a frame size with the specified constraint size 
  const BoxConstraints.tightFor({
    double width,
    double height,
  })

  //  Create a box constraint that requires a given width or height , Unless they are infinite 
  const BoxConstraints.tightForFinite({
    double width = double.infinity,
    double height = double.infinity,
  })

  //  Create a box constraint that prohibits sizes larger than the given size 
  BoxConstraints.loose(Size size)
    : minWidth = 0.0,
      maxWidth = size.width,
      minHeight = 0.0,
      maxHeight = size.height;

  //  Create a box constraint that extends to fill another box constraint 
  const BoxConstraints.expand({
    double width,
    double height,
  })
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.

Analyze the source code to know ,ConstrainedBox Also inherited from SingleChildRenderObjectWidget; The way of constraint is mainly to constraints The operation of ; be relative to SizedBox More flexible constraints ;

Case study

1. BoxConstraints()

BoxConstraints The construction method of can set the four properties of maximum, minimum width and height , It can be flexibly used in the actual scene ; The size of the constraint is in accordance with minWidth <= child.width <= maxWidth && minHeight <= child.Height <= maxHeight, When we don't set the width and height dimensions ,minWidth = 0.0 && minHeight = 0.0 && maxWidth = double.infinity && maxHeight = double.infinity;

return ConstrainedBox(constraints: BoxConstraints(), child: Container(color: Colors.pink.withOpacity(0.4), child: _textWid('ConstrainedBox')));
return ConstrainedBox(constraints: BoxConstraints(), child: Container(color: Colors.blueAccent.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints(minWidth: 100.0, minHeight: 100.0), child: Container(color: Colors.orange.withOpacity(0.4), child: _textWid('ConstrainedBox')));
return ConstrainedBox(constraints: BoxConstraints(maxHeight: 100.0, maxWidth: 100.0),  child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _0 Based on learning Flutter_04

2. BoxConstraints.tight(Size size)

.tight The construction method needs to pass a fixed size Size among minWidth == maxWidth == size.width && maxWidth == maxHeight == size.height; Regardless of son Widget Set the width and height according to Size Width and height constraints ;

return ConstrainedBox(constraints: BoxConstraints.tight(Size(110.0, 120.0)),
        child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Flutter Side dish _05

3. BoxConstraints.tightFor()

I understand .tightFor The way is .tight Refinement of methods , You can customize width and height; If width and height are not set , Then the maximum width and height is infinite , The minimum width and height is 0.0; If the width and height are set, the constraint is carried out according to the set size ;

return ConstrainedBox(constraints: BoxConstraints.tightFor(height: 110.0),
        child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints.tightFor(width: 110.0, height: 120.0),
        child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Android Vegetable bird _06

4. BoxConstraints.tightForFinite()

.tightForFinite And .tightFor similar , The default maximum width and height is infinite , The minimum width and height is 0.0, It determines whether the set width and height are infinite , No double.infinity be minWidth == maxWidth == width && maxWidth == maxHeight == height Constraint ;

return ConstrainedBox(constraints: BoxConstraints.tightForFinite(),
        child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints.tightForFinite(width: 110.0, height: 120.0),
        child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Android Vegetable bird _07

5. BoxConstraints.loose()

.loose Way to limit a given Size size ,minWidth / minHeight Are all 0.0, The maximum width and height is Size size ; The overall constraint is determined by Size Limit , Actual display and sub Widget Size related ;

return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 150.0)),
        child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 150.0)),
        child: Container(width: 200.0, height: 200.0, color: Colors.grey.withOpacity(0.6),
            child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints.loose(Size(110.0, 120.0)),
        child: Container(width: 100.0, height: 100.0, color: Colors.green.withOpacity(0.6),
            child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _Flutter project _08

6. BoxConstraints.expand()

Most of the .expand The method is filling , Default fill parent Widget, If width and height are not set , Default minWidth == maxWidth == double.infinity && minHeight == maxHeight == double.infinity, When using, pay attention to the parent constraint ;

return ConstrainedBox(constraints: BoxConstraints.expand(),
    child: Container(color: Colors.teal.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));
return ConstrainedBox(constraints: BoxConstraints.expand(width: 110.0, height: 150.0),
    child: Container(color: Colors.purple.withOpacity(0.4), child: _textWid('ConstrainedBox: A widget that imposes additional constraints on its child.')));

     
      1.
      2.
      3.
      4.

【Flutter project 】66 Illustrate basic constraints Box ( One ) #yyds Dry inventory # _0 Based on learning Flutter_09

Flutter Provides a variety of constraints Box, All roads lead to Rome , The same effect can be achieved in many ways , But I think we should know more about , Try the best possible solution ; It's a piece of cake Box The series of research is still very simple , If there are mistakes, please give more guidance ！