Flutter LayoutBuilder

最新推荐文章于 2024-05-26 22:34:42 发布

Leonardo_Fibonacci

最新推荐文章于 2024-05-26 22:34:42 发布

阅读量114

点赞数

分类专栏： Flutter 相关文章标签： flutter android

本文链接：https://blog.csdn.net/github_36850997/article/details/130265078

版权

Flutter 相关专栏收录该内容

39 篇文章 5 订阅

订阅专栏

这个组件可以实现响应式布局，

也可以拿到父组件的约束，去动态布局子组件。

比如说类似微信朋友圈列表的状态。

这里就可以动态的计算内容进行布局


// 拿到父组件的约束宽度 动态的布局
// 9宫格列表图片
LayoutBuilder(builder:(ctx,constraints){
  // 如果是一张图的话  占比 0.6最大的宽度
  double imgWidth = _imgCount == 1 ? constraints.maxWidth * 0.6  : (_imgCount == 2 || _imgCount == 4) ? (constraints.maxWidth - 4 * 2) / 2  : (constraints.maxWidth - 4 * 3) / 3 ;
  return  Wrap(
    spacing: 4,
    runSpacing: 4,
    runAlignment: WrapAlignment.start,
    children: item.images!.map((e){
      return Image.network(e,fit: BoxFit.cover,width: imgWidth,height: imgWidth,);
    }).toList(),);
}),