This is the 13th day of my participation in Gwen Challenge

preface

In our last article we talked about the “layer layout” of the Stack in Flutter, but we wrote over 2,000 words about its properties and effects alone. In this article we focus on the detailed placement of the subitems in the Stack.

How do you lay it out?

The following effect, inStackHow many ways can you think of to lay it out?

One way to do it

One of the ways I do this is with the following code layout.

BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        child: getItem('5'),
        // Align to the lower right corner
        bottom: 0,
        right: 0,
      ),
      Positioned(
        child: getItem('4'),
        // align to the lower left corner
        bottom: 0,
        left: 0,),/ / in the middle
      Center(
        child: getItem('3'),
      ),
      Positioned(
        child: getItem('2'),
        // Align to the upper right corner
        top: 0,
        right: 0,
      ),
      Positioned(
        child: getItem('1'),
        // aligns to the upper left corner
        top: 0,
        left: 0[], (), (Copy the code

There’s a Center Widget that we’ll talk about in a moment

getItem

In order to see more clearly, I will paste the getItem code for each post. Most of them are the same, but the widgets may vary slightly for effect

  /// Get subitems (this class uses selection parameters)
  Widget getItem(String index,
      {double? width = 60.double? height = 60, Color color = Colors.orange}) {
    return Container(
      // Set width and height to 60
      width: width,
      height: height,
      // Set the background color
      color: color,
      // Set the gap
      margin: EdgeInsets.all(2),
      // Center the subitem
      alignment: Alignment.center,
      // Set the child
      child: Text('$index')); }Copy the code

Would offer a small toy.

In one of the ways shown above, we useLeft, top, right, bottomFour positioning attributes, let’s look at the source code, in fact, there areWidth, height,attribute



And here the assertion is setLeft, right, width 或 Top, bottom, heightOne of the three properties has to be empty, and we’ll talk about why.

Single attribute

BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        left: 10,
        child: getItem('left 10'),
      ),
      Positioned(
        right: 10,
        child: getItem('right 10'),
      ),
      Positioned(
        width: 80,
        child: getItem('width 80'),
      ),
      Positioned(
        top: 10,
        child: getItem('top 10'),
      ),
      Positioned(
        bottom: 10,
        child: getItem('bottom 10'),
      ),
      Positioned(
        height: 80,
        child: getItem('height 80'(), (], (), (Copy the code
Left, right, width Top, bottom, height

Combination of properties

  • TopLeft, topRight, bottomLeft, bottomRight
BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        top: 10,
        left: 10,
        child: getItem('topLeft'),
      ),
      Positioned(
        top: 10,
        right: 10,
        child: getItem('topRight'),
      ),
      Positioned(
        bottom: 10,
        left: 10,
        child: getItem('bottomLeft'),
      ),
      Positioned(
        bottom: 10,
        right: 10,
        child: getItem('bottomRight'(), (], (), (Copy the code

  • If we putleft 和 rightHow about together?
BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        left: 10,
        right: 10,
        child: getItem('leftRight'),
      ),
      Positioned(
        top: 10,
        bottom: 10,
        child: getItem('topBottom'(), (], (), (Copy the code
leftRight topBottom
  • If we putleft 或 right 与 widthCombinations?
BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        left: 10,
        width: 100,
        child: getItem('leftWidth 100'),
      ),
      Positioned(
        right: 10,
        width: 100,
        child: getItem('RightWidth 100'),
      ),
      Positioned(
        top: 10,
        height: 100,
        child: getItem('topHeight 100'),
      ),
      Positioned(
        bottom: 10,
        height: 100,
        child: getItem('bottomHeight 100'(), (], (), (Copy the code

| (left | right) & width | (top | bottom) & height | | :—: | :—: | | | |

  • What if you have three attributes at the same latitude?
BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Positioned(
        left: 10,
        right: 10,
        width: 100,
        child: getItem('leftRightWidth 100'() [(), ()Copy the code

That must be an error, just look at the source code has seen the assertion that cannot write this, because

The left and right can specify a width, and setting another width conflicts

  • What if you combine three properties from different dimensions?
// bottomLeftWidth 100
Positioned(
  left: 10,
  bottom: 10,
  width: 100,
  child: getItem('bottomLeftWidth 100'),),// rightTopBottom
Positioned(
  right: 10,
  top: 10,
  bottom: 10,
  child: getItem('rightTopBottom'),Copy the code

bottomLeftWidth 100 rightTopBottom

As long as it’s different dimensions how do you put it together?

A small summary

By this time we have completed the basic use of tourists, offering a more precise set of parameters, positioning and width of the small items.

Align = Align

There’s actually a much simpler way to do what we started with, which is to useAlignSet the child item

BgContainer(
  child: Stack(
    alignment: Alignment.center,
    // Set the fill mode to accept the maximum parent constraint
    fit: StackFit.expand,
    children: [
      Align(
        child: getItem('5'),
        // Align to the lower right corner
        alignment: Alignment.bottomRight,
      ),
      Align(
        child: getItem('4'),
        // align to the lower left corner
        alignment: Alignment.bottomLeft,
      ),
      / / in the middle
      Align(
        child: getItem('3'),
        // Center is the default
        alignment: Alignment.center,
      ),
      Align(
        child: getItem('2'),
        // Align to the upper right corner
        alignment: Alignment.topRight,
      ),
      Align(
        child: getItem('1'),
        // align to the upper left corner
        alignment: Alignment.topLeft,
      ),
    ],
  ),
)
Copy the code

We’ve talked a lot about the alignment attribute in Align, but we won’t talk about it here, but it’s the same idea. So here we have the number three, we have the Align, we have the Center at the beginning and I’m going to tell you a little bit about it.

Center (Center)

Why can we replace Center with Align and have the same effect? We look at the source code will understand.

Center source

Align the source code



You can see it here. ActuallyCenterisAlignA subclass of, and didn’t do anything, but we could call itThe aliasBecause theAlign 的 alignmentThe default value of the property is middle.

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • Positioned (Flutter Widget of the Week)
  • Flutter-Positioned
  • Align (Flutter Widget of the Week)
  • Flutter-Align
  • Flutter-Center

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible