Flutter LayoutBuilder

最新推荐文章于 2025-08-15 09:53:31 发布

原创最新推荐文章于 2025-08-15 09:53:31 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android

Flutter 相关专栏收录该内容

39 篇文章

订阅专栏

该组件依据父组件的约束宽度进行动态布局，特别是在创建如微信朋友圈状态的9宫格图片列表时。通过LayoutBuilder，我们可以计算每个图片的宽度，如单图占0.6最大宽度，双图或四图时平均分配剩余空间，确保布局适应不同屏幕尺寸。

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

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

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

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


// 拿到父组件的约束宽度 动态的布局
// 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(),);
}),