41、Flutter之widgets 响应式布局LayoutBuilder组件

呼应式运用指的是运用的 UI 会跟着屏幕或窗口的改变而改变，当同一个运用需求运行在不同品种的设备的时分（比方手表、手机、平板、笔记本或台式机电脑），当用户在笔记本或台式机上调整窗口巨细，或许改变了手机或许平板的方向时，你的运用都需求相应的从头调整界面来做出呼应。

LayoutBuilder

通过 LayoutBuilder，咱们能够在布局过程中拿到父组件传递的束缚信息，然后咱们能够依据束缚信息动态的构建不同的布局。

比方咱们完成一个呼应式的 Column 组件 ResponsiveColumn，它的功用是当当前可用的宽度小于 200 时，将子组件显现为一列，否则显现为两列。简单来完成一下：

class ResponsiveColumn extends StatelessWidget {
  const ResponsiveColumn({Key? key, required this.children}) : super(key: key);
  final List<Widget> children;
  @override
  Widget build(BuildContext context) {
    // 通过 LayoutBuilder 拿到父组件传递的束缚，然后判别 maxWidth 是否小于200
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        if (constraints.maxWidth < 200) {
          // 最大宽度小于200，显现单列
          return Column(children: children, mainAxisSize: MainAxisSize.min);
        } else {
          // 大于200，显现双列
          var _children = <Widget>[];
          for (var i = 0; i < children.length; i += 2) {
            if (i + 1 < children.length) {
              _children.add(Row(
                children: [children[i], children[i + 1]],
                mainAxisSize: MainAxisSize.min,
              ));
            } else {
              _children.add(children[i]);
            }
          }
          return Column(children: _children, mainAxisSize: MainAxisSize.min);
        }
      },
    );
  }
}
class LayoutBuilderRoute extends StatelessWidget {
  const LayoutBuilderRoute({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    var _children = List.filled(6, Text("A"));
    // Column在本示例中在水平方向的最大宽度为屏幕的宽度
    return Column(
      children: [
        // 束缚宽度为190，小于 200
        SizedBox(width: 190, child: ResponsiveColumn(children: _children)),
        ResponsiveColumn(children: _children),
        LayoutLogPrint(child:Text("xx")) // 下面介绍
      ],
    );
  }
}

能够发现 LayoutBuilder 的运用很简单，但是不要小看它，因为它十分有用且重要，它主要有两个运用场景：

• 能够运用 LayoutBuilder 来依据设备的尺度来完成呼应式布局。
• LayoutBuilder 能够帮咱们高效排查问题。比方咱们在遇到布局问题或许想调试组件树中某一个节点布局的束缚时 LayoutBuilder 就很有用。

打印布局时的束缚信息

为了便于排错，咱们封装一个能打印父组件传递给子组件束缚的组件：

class LayoutLogPrint <T>extends StatelessWidget {
  final Widget child;
  final T? tag;
  const LayoutLogPrint({Key? key, required this.child, this.tag}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (_,constraints){
      // assert在编译release版别时会被去除
      assert(() {
        print('${tag ?? key ?? child}: $constraints');
        return true;
      }());
      return child;
    });
  }
}

这样，咱们就能够运用 LayoutLogPrint 组件树中任意方位的束缚信息，比方：

LayoutLogPrint(child:Text("xx"))

控制台输出：

flutter: Text("xx"): BoxConstraints(0.0<=w<=393.0, 0.0<=h<=Indinity)

能够看到 Text(“xx”) 的显现空间最大宽度为 393，最大高度为 Indinity 。

项目有用1

假如图片在运用过程中，不要求图片的完整性，能够进行拉伸，咱们就会运用其属性fit为BoxFit.fill，运用这个属性后图片就能够进行拉伸处理。不过假如咱们需求是宽占满整个屏幕，高度为自定义的高度，则简单的代码就很难完成了，如下：

Center(
        child: Container(
          child: Column(
            children: <Widget>[
              Image.network(
                "",
                fit: BoxFit.fill,
                height: 100,
              ),
              Text("图片"),
            ],
          ),
        ),
      ),

运行作用：

此刻需求知道父级的宽度即可，此刻便能够用LayoutBuilder进行包括：

LayoutBuilder(
        builder: (context, constraints) {
          return Center(
            child: Container(
              child: Column(
                children: <Widget>[
                  Image.network(
                    "",
                    fit: BoxFit.fill,
                    height: 100,
                    width: constraints.maxWidth,
                  ),
                  Text("图片"),
                ],
              ),
            ),
          );
        },
      ),

builder: (context, constraints){}中，context是父级的上下文，constraints为BoxConstraints类型，maxWidth为父级宽度，maxHeight为父级高度。

项目有用2

LayoutBuilder组件依据不同的屏幕尺度显现不同的作用，如竖屏和横屏显现的样式不一样。

代码：

class WyLayoutBuilder extends StatelessWidget {
  const WyLayoutBuilder({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: getAppBar("横竖屏输配"),
      body: LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
          Color color = Colors.red;
          double width = 100;
          if (constraints.maxWidth > 414) {
            color = Colors.blue;
            width = 300;
          }
          return Container(
            width: width,
            height: 50,
            color: color,
          );
        },
      )
      ,
    );
  }
}

本文正在参加「金石计划 . 分割6万现金大奖」