Flutter LayoutBuilder is used to get the size of the parent layout

Climbers aiming for the top will not be intoxicated by a certain footprint along the way. In the world of code farmers, the beautiful application experience comes from the programmer's handling of details and the realm of self-requirements. Young people are also busy One of the busy code farmers, every day and every week, will leave some footprints. It is the content of these creations. There is a kind of persistence. I don’t know why. If you are confused, you might as well take a look at the track of the code farmers.

The effect of this article is as follows:
insert image description here

1 The core code is to obtain the parent window size through LayoutBuilder

LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints) {
    
    

  double maxWidth = constraints.maxWidth;
  double minWidth = constraints.minWidth;

  double maxHeight = constraints.maxHeight;
  double minHeight = constraints.minHeight;
  if(maxWidth>400) {
    
    
    return buildRow();
  }
  return buildColumn();
  
},)

2 All code implementation

class LayoutBuilderPage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: Center(
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
    
    
            double maxWidth = constraints.maxWidth;
            double minWidth = constraints.minWidth;

            double maxHeight = constraints.maxHeight;
            double minHeight = constraints.minHeight;
            if (maxWidth > 400) {
    
    
              return buildRow();
            }
            return buildColumn();
          },
        ),
      ),
    );
  }

  Widget buildRow() {
    
    
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(onPressed: () {
    
    }, child: Text("右侧按钮")),
        SizedBox(
          width: 60,
        ),
        ElevatedButton(onPressed: () {
    
    }, child: Text("左侧按钮")),
      ],
    );
  }

  Widget buildColumn() {
    
    
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(onPressed: () {
    
    }, child: Text("右侧按钮")),
        SizedBox(
          height: 60,
        ),
        ElevatedButton(onPressed: () {
    
    }, child: Text("左侧按钮")),
      ],
    );
  }
}

If you are confused, you might as well come here to share every day, and then accumulate
more Widget applications. The editor has summarized them in the book.


insert image description here

おすすめ

転載: blog.csdn.net/zl18603543572/article/details/123553969