Flutter Expanded扩展布局

最新推荐文章于 2024-10-22 16:09:59 发布

原创最新推荐文章于 2024-10-22 16:09:59 发布 · 609 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Expanded扩展布局

flutter 专栏收录该内容

220 篇文章

订阅专栏

这篇博客探讨了Flutter中的Expanded布局组件如何用于动态分配剩余空间。文章通过实例展示了如何在底部固定高度的情况下，利用Expanded让上面的空间自适应。同时提到了在存在多个Expanded时，如何使用flex属性调整它们之间的空间竞争。示例代码中，作者使用了Padding和Divider，并在最后放置了一个固定高度的_CartTotal组件，以此说明剩余空间的分配原理。

Flutter Expanded扩展布局，比如底部固定高度，上面的空间可以留下给Expanded。

当有多个Expanded时，使用flex属性的值调整他们，以防止竞争空间。

children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(32),
                child: _CartList(),
              ),
            ),
            Divider(height: 4, color: Colors.black),
            _CartTotal()   //这个是固定高度的，所以剩下的就是上面的部分了。
          ],