Introduction to the

Container

It is a Widget composed of many container classes (DecoratedBox, ConstrainedBox, Transform, Padding, Align, etc.), so its functionality can be described as a collection of features

Positioned

It is a Widget for positioning within the Stack layout, and is the same as position: Absolute; similar

Positioned the Container in the jam

In a flutter, containers take up the entire space by default. So when the Container is used, what happens?

  • Code snippet
. .@override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
          Positioned(
          // The Container object to analyze
            child: Container(
            _keyRed = GlobalKey();
            // Bind Container with key
              key: _keyRed,
              decoration: BoxDecoration(color: Colors.yellow),
              child: Row(
                children: <Widget>[
                ],
              ),
            ),
          ),
          Positioned(
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              MaterialButton(
                elevation: 5.0,
                padding: EdgeInsets.all(15.0),
                color: Colors.grey,
                child: Text("Get Sizes"),
                onPressed: _getSizes,
              ),
              MaterialButton(
                elevation: 5.0,
                color: Colors.grey,
                padding: EdgeInsets.all(15.0),
                child: Text("Get Positions"),
                onPressed: _getPositions,
              ),
            ],
          )),
        ],
      ),
    );
    // Obtain the rendering position of the Container
  _getPositions() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final positionRed = renderBoxRed.localToGlobal(Offset.zero);
    print("POSITION of Red: $positionRed ");
  }
// Get the size of the Container
  _getSizes() {
    final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
    final sizeRed = renderBoxRed.size;
    print("SIZE of Red: $sizeRed");
  }
Copy the code
  • According to the effect

    The Color of the toy Container is yellow, but there is no representation of the space on the interface because the Container, like in HTML, contains the whole line of blocks but has no height, Click the buttons Get Sizes and Get Position to output the Container Position and size

I/flutter (27566): SIZE of Red: Size(360.0.0.0)
I/flutter (27566): POSITION of Red: Offset(0.0.0.0)
Copy the code

Add height: 50.0 to the Container

  • print
I/flutter (27566): SIZE of Red: Size(360.0.50.0)
I/flutter (27566): POSITION of Red: Offset(0.0.0.0)
Copy the code
  • Position the Container at the bottombottom:0

    Container is gone again, plusbottom:0Just as in HTML, block-level elements are absolutely locatedposition:absolute;The default width and height is 0

  • print
I/flutter (27566): SIZE of Red: Size(0.0.50.0)
I/flutter (27566): POSITION of Red: Offset(0.0.542.0) 
Copy the code

Add width or child elements to Container

. .// Bind Container with key
  key: _keyRed,
  decoration: BoxDecoration(color: Colors.yellow),
  child: Row(
    children: <Widget>[
        Text('222'),
        Text('333'),,),Copy the code
  • print
I/flutter (27566): SIZE of Red: Size(203.0.50.0)
I/flutter (27566): POSITION of Red: Offset(0.0.542.0) 
Copy the code

Margin: EdgeInsets. Only (bottom: 50.0, right: 10.0)

  • print
I/flutter (27566): SIZE of Red: Size(213.0.100.0)
I/flutter (27566): POSITION of Red: Offset(0.0.492.0) 
// padding: EdgeInsets. Only (top: 50.0,left: 10.0), '
I/flutter (27566): SIZE of Red: Size(213.0.50.0)
I/flutter (27566): POSITION of Red: Offset(0.0.542.0) 
Copy the code
  • Margin is superimposed with width and height
  • The padding only overlaps left and right with width

So how do you make the Container full and line up the bottom

The Align to replace Positioned

Align(
    // Align bottom
    alignment: Alignment.bottomCenter,
    child: Container(
      key: _keyRed,
      decoration: BoxDecoration(color: Colors.yellow),
      child: Row(
        children: <Widget>[
          Text('222'),
          Text('333'(), [(), (), (Copy the code

Use the Align Container to fill the width of the Container but still defaults to 0 for height, so adding child elements will look like this:

conclusion

  • You can use the Stack features to locate the layout and the corresponding properties of containers. There may be other layouts that are more suitable, welcome to discuss.
  • To get the size and location of the container, please go to my translation
  • Juejin. Cn/post / 684490…