首页 > 其他分享 >一统天下 flutter - widget Builder: LayoutBuilder - 可以拿到父亲的尺寸的 Builder

一统天下 flutter - widget Builder: LayoutBuilder - 可以拿到父亲的尺寸的 Builder

时间:2023-03-22 11:02:18浏览次数:47  
标签:widget Builder toInt 尺寸 flutter LayoutBuilder constraints

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget Builder: LayoutBuilder - 可以拿到父亲的尺寸的 Builder

示例如下:

lib\widget\builder\layout_builder.dart

/*
 * LayoutBuilder - 可以拿到父亲的尺寸的 Builder
 *
 * 请先了解 Builder,参见 builder.dart
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

class LayoutBuilderDemo extends StatefulWidget {
  const LayoutBuilderDemo({Key? key}) : super(key: key);

  @override
  _LayoutBuilderDemoState createState() => _LayoutBuilderDemoState();
}

class _LayoutBuilderDemoState extends State<LayoutBuilderDemo> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        /// 通过 LayoutBuilder 可以拿到父亲的尺寸
        /// 这里拿到的是 Column 的尺寸,我这里的打印结果为 0, 411, 0, true
        LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return MyText("${constraints.minWidth.toInt()}, ${constraints.maxWidth.toInt()}, ${constraints.minHeight.toInt()}, ${constraints.maxHeight.isInfinite}");
          },
        ),
        SizedBox(
          width: 400,
          height: 100,
          /// 通过 LayoutBuilder 可以拿到父亲的尺寸
          /// 这里拿到的是 SizedBox 的尺寸,我这里的打印结果为 400, 400, 100, 100
          child: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              return MyText("${constraints.minWidth.toInt()}, ${constraints.maxWidth.toInt()}, ${constraints.minHeight.toInt()}, ${constraints.maxHeight.toInt()}");
            },
          ),
        )
      ],
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,Builder,toInt,尺寸,flutter,LayoutBuilder,constraints
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_builder_layout_builder.html

相关文章