flutter系列之:把box布局用出花来

简介: flutter中的layout有很多,基本上看layout的名字就知道这个layout到底是做什么用的。比如说这些layout中的Box,从名字就知道这是一个box的布局,不过flutter中的box还有很多种,今天我们来介绍最常用的LimitedBox,SizedBox和FittedBox。

简介

flutter中的layout有很多,基本上看layout的名字就知道这个layout到底是做什么用的。比如说这些layout中的Box,从名字就知道这是一个box的布局,不过flutter中的box还有很多种,今天我们来介绍最常用的LimitedBox,SizedBox和FittedBox。

LimitedBox

LimitedBox是一种限制大小的Box,先来看下LimitedBox的定义:

class LimitedBox extends SingleChildRenderObjectWidget

可以看到LimitedBox继承自SingleChildRenderObjectWidget,表示LimitedBox中可以有一个single child。

那么LimitedBox一般用在什么地方呢?

考虑在一个可滚动列表的情况下,比如ListView,因为他是unbounded的,如果ListView的子widget是Container的话,Container会尽可能的小,这很明显不是我们所想要的,我们以下面的代码为例:

Widget build(BuildContext context) {
    return ListView(
      children: [
        for(var i=0; i < 10 ; i++)
          Container(
            color: list[i % 4],
          )
      ],
    );
  }

在ListView中,我们添加了一个Container,这些Container中只设置了color,并且并未设置任何大小,那么将会得到下面的界面:

可以看到现在看到的界面是空白的。

当然,你可以给Container设置height属性来达到对应的目的:

Widget build(BuildContext context) {
    return ListView(
      children: [
        for(var i=0; i < 10 ; i++)
          Container(
            height: 100,
            color: list[i % 4],
          )
      ],
    );
  }

或者使用LimitedBox来达到同样的效果:

Widget build(BuildContext context) {
    return ListView(
      children: [
        for(var i=0; i < 10 ; i++)
          LimitedBox(
            maxHeight: 100,
            child: Container(
              // height: 100,
              color: list[i % 4],
            ),
          )
      ],
    );
  }

我们可以得到下面的界面:

SizedBox

SizedBox从名字就知道是给box一个指定的size。

先来看下Sizedbox的定义:

class SizedBox extends SingleChildRenderObjectWidget

可以看到SizedBox继承自SingleChildRenderObjectWidget,表示它可以包含一个child widget。

然后再来看下它的构造函数:

const SizedBox({ Key? key, this.width, this.height, Widget? child })

SizedBox主要接受width,height和它的child widget。SizedBox主要用来强制它的child widget的width和height保持一致。

我们来看一个具体的例子:

Widget build(BuildContext context) {
    return SizedBox(
      width: 200.0,
      height: 200.0,
      child: Container(
        color: Colors.blue,
      ),
    );
  }

上面的例子中我们指定了固定SizedBox。最后得到的界面如下:

事实上SizedBox的width和height并不一定是固定的值,我们可以将他们设置为double.infinity,表示child widget会尽可能的填充。

比如下面的例子:

Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: double.infinity,
      child: Container(
        color: Colors.blue,
      ),
    );
  }

展示的界面是这样的:

SizedBox也提供了一个expand方法来提供类似的功能:

Widget build(BuildContext context) {
    return SizedBox.expand(
      child: Container(
        color: Colors.blue,
      ),
    );
  }

上面的代码和使用double.infinity是等价的。

SizedBox还可以不包含任何child,在这种情况下,SizedBox表示的就是一个空白gap。

FittedBox

FittedBox就是填充box的意思,可以按照指定的fit规则来填充它的child。

先来看下FittedBox的定义:

class FittedBox extends SingleChildRenderObjectWidget {

FittedBox继承自SingleChildRenderObjectWidget,表示它也只包含一个child。

再看下FittedBox的构造函数:

const FittedBox({
    Key? key,
    this.fit = BoxFit.contain,
    this.alignment = Alignment.center,
    this.clipBehavior = Clip.none,
    Widget? child,
  })

FittedBox有几个非常有意思的参数,首先是fit,表示如何填充Box,它是一个BoxFit对象,BoxFit有几个值,用来描述fix的方式。

比如fill表示填充到box中,不管之前child的长宽比,而contain表示的是尽可能的包含child。

alignment是一个AlignmentGeometry,表示的是child的排列方式。

clipBehavior表示的是Box和child重叠的时候的剪切方式。

我们看一个具体的例子:

Widget build(BuildContext context) {
    return FittedBox(
      fit: BoxFit.fill,
      child: Image.asset('images/head.jpg'),
    );
  }

上面例子中,我们使用了BoxFit.fill来填充,我们看下具体的效果:

总结

这几个box是我们在日常的工作中经常会用到的box。大家可以熟练掌握。

本文的例子:https://github.com/ddean2009/learn-flutter.git

更多内容请参考 www.flydean.com

最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!

欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!

相关文章
|
8月前
|
编解码 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
【4月更文挑战第30天】Flutter框架助力移动应用实现响应式设计与自适应布局,通过层次化布局系统和`Widget`树管理,结合`BoxConstraints`定义尺寸范围,实现自适应。利用`MediaQuery`获取设备信息,调整布局以适应不同屏幕。`FractionallySizedBox`按比例设定尺寸,`LayoutBuilder`动态计算布局。借助这些工具,开发者能创建跨屏幕尺寸、方向兼容的应用,提升用户体验。
188 0
【Flutter前端技术开发专栏】Flutter中的响应式设计与自适应布局
|
2月前
|
缓存 监控 前端开发
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
83 10
|
1月前
|
存储 容器
Flutter 构建自适应布局
Flutter 构建自适应布局
Flutter 构建自适应布局
|
2月前
|
开发框架 数据安全/隐私保护 开发者
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计
Flutter 是一款强大的跨平台移动应用开发框架,本文深入探讨了其布局与样式设计,涵盖布局基础、常用组件、样式设计、实战应用、响应式布局及性能优化等方面,助力开发者打造精美用户界面。
58 7
|
2月前
|
开发者 容器
Flutter&鸿蒙next 布局架构原理详解
本文详细介绍了 Flutter 中的主要布局方式,包括 Row、Column、Stack、Container、ListView 和 GridView 等布局组件的架构原理及使用场景。通过了解这些布局 Widget 的基本概念、关键属性和布局原理,开发者可以更高效地构建复杂的用户界面。此外,文章还提供了布局优化技巧,帮助提升应用性能。
125 4
|
2月前
|
容器
深入理解 Flutter 鸿蒙版的 Stack 布局:适配屏幕与层叠样式布局
Flutter 的 Stack 布局组件允许你将多个子组件层叠在一起,实现复杂的界面效果。本文介绍了 Stack 的基本用法、核心概念(如子组件层叠、Positioned 组件和对齐属性),以及如何使用 MediaQuery 和 LayoutBuilder 实现响应式设计。通过示例展示了照片展示与文字描述、动态调整层叠布局等高级用法,帮助你构建更加精美和实用的 Flutter 应用。
164 2
|
3月前
|
容器
Flutter&鸿蒙next 布局架构原理详解
Flutter&鸿蒙next 布局架构原理详解
|
3月前
|
Android开发 开发者 容器
flutter:&UI布局 (六)
本文档介绍了Flutter中的UI布局方式,包括线性布局(如Column和Row)、非线性布局(如Stack、Flex、Positioned)以及Wrap布局等。通过具体示例代码展示了如何使用这些布局组件来构建灵活多变的用户界面,例如使用Column垂直排列文本、使用Stack叠加组件、以及利用Wrap实现自动换行的按钮布局等。
106 1
|
6月前
|
容器
flutter 布局管理【详解】
flutter 布局管理【详解】
51 3
|
6月前
Flutter-自定义折叠流布局实现
Flutter-自定义折叠流布局实现
136 0