The flyer obtains the size and position information of the widget and realizes the custom layout

Time:2022-1-8

First of all, thank Uncle Wang of station B for not balding. I can learn a lot from him
For many students who just came into contact with flutter, they have no way to start when facing the accurate coordinate layout. They mistakenly think that flutter can’t do it or it’s difficult to do it. Next, the author takes you out of this dilemma.

To obtain the size and location information of the widget, you can use the globalkey method, for example.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class GlobalKeyTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    GlobalKey globalKey = GlobalKey();
    return Scaffold(
      appBar: AppBar(
        title: Text('GlobalKeyTest'),
      ),
      body: Stack(
        children: <Widget>[
          Positioned(
            left: 100,
            top: 0,
            child: FlatButton(
              key: globalKey,
              onPressed: () {
                RenderBox renderBox =
                    globalKey.currentContext.findRenderObject();
                print(
                    'W:${globalKey.currentContext.size.height}H:${globalKey.currentContext.size.width}');
                print(
                    'x:${renderBox.localToGlobal(Offset.zero).dx}y:${renderBox.localToGlobal(Offset.zero).dy}');
              },
              Child: text ("flat button"),
              color: Colors.blue,
              textColor: Colors.black,
              shape: RoundedRectangleBorder(
                  side: BorderSide(
                    color: Colors.white,
                    width: 1,
                  ),
                  borderRadius: BorderRadius.circular(8)),
            ),
          ),
        ],
      ),
    );
  }
}

It can be found that the location information and size information are printed when clicking
I/flutter ( 9984): W:48.0H:88.0
I/flutter ( 9984): x:100.0y:80.0

Indeed, in actual combat development, in many cases, it is useless to just get the coordinate information. For example, you need to make your own component, which accepts a weidget array for oblique layout, so it is not enough to only get the location and size information. What should we do? Realization effect

The flyer obtains the size and position information of the widget and realizes the custom layout

12.jpg

We can use stack or custommultichildlayout. In order to make it easier for everyone to understand, I will use stack here.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class BevelAbgle extends StatefulWidget {
  final List<Widget> myChildren;
  BevelAbgle(this.myChildren);
  @override
  _BevelAbgleState createState() => _BevelAbgleState();
}

class _BevelAbgleState extends State<BevelAbgle> {
  final List<GlobalKey> globalKeys = [];
  final List<Widget> showChildren = [];
  bool show = false;
  List<Widget> getCustomChildren() {
    List<Widget> myChildren = [];
    for (var j = 0; j < widget.myChildren.length; j++) {
      var globalKey = GlobalKey();
      globalKeys.add(globalKey);
      myChildren.add(
        Row(
          key: globalKey,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[widget.myChildren[j]],
        ),
      );
    }

    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      updateWeight();
      setState(() {
        show = true;
      });
    });
    return myChildren;
  }

  void updateWeight() {
    var widgetW = 0.0;
    var widgetH = 0.0;
    for (var i = 0; i < widget.myChildren.length; i++) {
      if (i > 0) {
        widgetW = widgetW + globalKeys[i - 1].currentContext.size.width;
        widgetH = widgetH + globalKeys[i - 1].currentContext.size.height;
      }
      showChildren.add(Positioned(
        left: widgetW,
        top: widgetH,
        child: widget.myChildren[i],
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.green,
        child: Stack(
          children: !show ? getCustomChildren() : showChildren,
        ),
      ),
    );
  }
}

The idea of this code is:
1. Create a globalkey array, render the passed widget array in advance, and give globalkey to save in the array.
2. Loop through the globalkey array, and then get the width and height for rearrangement and drawing.

Next, let’s test

import 'package:flutter/cupertino.dart';
import 'package:flutter_animation/component/BevelAngle.dart';

class BelevelAnglePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: BevelAbgle([
        Text ('cow '),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 150,
          height: 150,
        ),
        Text ('qi '),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 50,
          height: 50,
        ),
        Text ('13333444423211 '),
        Text ('13333444423211 '),
        Image.network(
          'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.gb324.com%2Fd%2Ffile%2Ftitlepic%2F2021-02-17%2F12%2F12044314839.png&refer=http%3A%2F%2Fwww.gb324.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616221584&t=6b8f7f1c007d07bf98c03cfc3b6e0523',
          width: 50,
          height: 50,
        ),
        Text ('day '),
      ]),
    );
  }
}

Now I believe you know something about custom layout.

Recommended Today

The whole tutorial of docker installation and use, installation / complete command / dockerfile image production / docker container arrangement and one click installation of nginx + redis + MySQL / visualizer portal (version 2022)

官网: https://docs.docker.com/ 官网: https://www.docker.com/ docker 镜像市场: https://hub.docker.com/ 一、docker 说明 1.1、docker 核心 1、Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源,Docker 是一个 CS 架构软件。 2、Docker 是一个虚拟化轻量级linux服务器,可以解决我们在开发环境中运行配置问题 3.、Docker的主要目标是‘build ,ship and run any app,anywhere’,一次封装,到处运行 4、容器是完全使用沙箱机制,相互之间不会有任何接口(类似 iPhone 的 app),更重要的是容器性能开销极低。 1.2、docker 版本问题 .Docker 从 17.03 版本之后分为 CE(Community Edition: 社区版) 和 EE(Enterprise Edition: 企业版),我们用社区版就可以了。 1.3、docker 架构( 3大核心) · 1、Images 镜像 (等于软件) · 2、Registry […]