Flutter LayoutBuilder 用来获取父布局的尺寸大小

16 篇文章 0 订阅

志在巅峰的攀登者,不会陶醉在沿途的某个脚印之中,在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。

本文章的效果如下:
在这里插入图片描述

1 核心代码是通过 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 全部代码实现
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("左侧按钮")),
      ],
    );
  }
}

如果你迷茫 不妨来此 每日分享 先积累着再说
更多Widget 的应用,小编已总结在书中


在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值