Mackit 신제품

Mackit — macOS 개발자 캐시 클리너:Xcode / Node / Flutter 등이 남긴 재생성 가능한 캐시를 스캔하고 항목별 위험을 표시해 디스크 공간을 되찾으세요

자세히 보기
안내 2024년 6월부터 개발자 게시판의 새 글 업데이트를 중단했습니다. 방문해 주셔서 감사합니다. 아카이브 글
前端

Flutter性能优化之Container替换

很多开发者使用Flutter开发的时候都遇到性能瓶颈,其实降低WidgetTree渲染负担才是王道。有时候选择适合的组件是最好的办法。Flutter的Container组件是使用频率最高的组件,那么今天我们就用它来展开聊聊。

Flutter Container组件的用途

Flutter Container组件是Flutter框架中的一个重要组件,用于创建具有良好设计的容器。它是Flutter布局系统中的基本组件之一,可用于在Flutter应用程序中构建各种UI布局。

用途概述 ----

Container组件的主要用途是在Flutter应用程序中创建可容纳其他UI组件的区域。它可以用于各种目的,包括显示图像、文本、表单控件等。通过使用Container组件,开发者可以轻松地创建具有不同尺寸、背景颜色、边距和填充等属性的容器,以实现美观和一致的界面设计。

示例应用 ----

Container组件来创建一个具有边距和背景颜色的容器。这个容器位于Scaffold部件的body中,用于展示一个中心内容。通过使用Container组件,我们可轻松地控制容器的外观和布局,使其适应应用程序的设计需求。

自定义属性 -----

除了默认属性之外,Flutter Container组件还支持许多自定义属性,允许开发者根据需要调整容器的外观。这些属性包括:

* 边框颜色和宽度:可以使用`borderColor`和`borderWidth`属性来设置容器的边框颜色和宽度。 * 背景颜色:可以使用`background`属性来设置容器的背景颜色。 * 填充:可以使用`clipBehavior`和`decoration`属性来控制容器内的内容如何被剪裁和装饰。 * 尺寸:可以使用`width`和`height`属性来设置容器的尺寸。

总结 --

Flutter Container组件是Flutter布局系统中的基本组件之一,可用于创建各种具有良好设计的容器。通过使用Container组件,开发者可以轻松地控制容器的外观和布局,以满足应用程序的设计需求。它还支持许多自定义属性,允许开发者根据需要进行调整。掌握Container组件的使用,对于构建美观和一致的Flutter应用程序至关重要。

如何渐进的替换Container

有时候,你只用到padding或者Margin属性,那么就使用Padding组件,有时候你只用到color,那么就用ColoredBox组件,而不是使用Container,因为这样可以大大降低Widget tree的重量。

比如只用到contrians, 就使用ConstrainedBox(constraints: constraints)

const SizedBox(
height: kBrandDetailHeaderHeight,
width: double.infinity,
child: ColoredBox(
color: Colors.black45,
child: shrinkBox,
),
),

如果使用Container,那么较多的widget tree在一些渲染次数较多的情况下,会带来一定的压力

好了,具体的情况根据自己使用的属性进行合理替换即可。