Flutter知识梳理 布局篇《二》
单子布局组件
布局中的单子组件，以及单子组件的作用。
ConstrainedBox (限制宽高)
ConstrainedBox可以指定最大最小宽高，常用于调整子组件的渲染大小,如限制图片或文本的最大显示尺寸等。 传入一个
BoxConstraints约束对象，给子级施加额外的约束。
属性
-
constraints: 一个BoxConstraints对象,用于指定添加的约束条件。 -
child:ConstrainedBox的子组件。
SizedBox （灵活控制组件大小以及占位）
用于给子组件指定固定的宽度和高度。常用于控制布局间距或者限制子组件的大小。
属性
-
width: SizedBox占的宽度。 -
height: SizedBox占的高度。 -
child:SizedBox的子组件。
LimitedBox （限制宽高最大值）
用来限制子组件的最大宽度和高度。与
ConstrainedBox类似,但LimitedBox只会限制最大值,不会限制最小值
属性
-
maxWidth: 子组件最大允许的宽度。 -
maxHeight: 子组件最大允许的高度。 -
child:LimitedBox的子组件。
Align （子组件的对齐）
用于在父容器中对子组件进行对齐操作
属性
-
alignment: 一个Alignment对象,用于指定子组件在父容器中的对齐方式。 -
widthFactor和heightFactor: 控制子组件在父容器中占用的宽度和高度比例。 -
child: 需要对齐的子组件。
OverflowBox （子组件可超出父容器）
当子组件的大小超出父容器的范围时,
OverflowBox可以让子组件完整地呈现,而不被裁剪
属性:
minWidth、maxWidth、minHeight、maxHeight: 用于限制OverflowBox自身的大小约束。alignment: 用于指定子组件在OverflowBox中的对齐方式。child: 需要展示的子组件。
SizedOverflowBox(超出自身设置范围)
允许子组件超出自身设置的尺寸范围。它是
SizedBox和OverflowBox的结合体。
属性:
-
size: 指定SizedOverflowBox自身的大小。 -
alignment: 指定子组件在SizedOverflowBox中的对齐方式。 -
child: 需要展示的子组件。
FractionallySizedBox (响应式 根据父组件改变自身)
根据父容器的尺寸比例来调整自身尺寸的组件
属性:
widthFactor: 一个 0 到 1 之间的数值,表示组件宽度相对于父容器宽度的比例。heightFactor: 一个 0 到 1 之间的数值,表示组件高度相对于父容器高度的比例。alignment: 指定子组件在FractionallySizedBox中的对齐方式。child: 需要缩放的子组件。
AspectRatio (设置子组件宽高比)
调整子组件宽高比的组件，照指定的宽高比例进行缩放和裁剪。
属性:
-
aspectRatio: 一个double类型的值,表示宽高比。例如1/1表示正方形,16/9表示16:9的宽高比。 -
child:AspectRatio的子组件。
Padding (添加内边距)
子组件添加内边距
属性:
-
padding: 一个EdgeInsetsGeometry对象,用于指定四个方向的内边距。通常使用EdgeInsets类来创建。 -
child:Padding中需要添加内边距的子组件。
FittedBox (响应式 根据子组件宽高比调整自身大小)
根据子组件的大小自动调整自身大小的布局组件。它会尽可能缩放子组件以适应父容器的约束,同时保持子组件的宽高比不变
属性:
fit: 指定当子组件大小无法完全适应父容器约束时的行为。- 可选值有
BoxFit.contain(缩放以适应父容器)BoxFit.cover(填充父容器并可能裁剪)BoxFit.fitWidth(宽度适应父容器)BoxFit.fitHeight(高度适应父容器)BoxFit.scaleDown(仅缩小不放大)等。
-
alignment: 指定子组件在FittedBox内的对齐方式。 -
clipBehavior: 指定当子组件超出FittedBox大小时的裁剪行为。 -
child: 需要自动缩放的子组件。
其他
Overlay (显示在所有组件的上面)
可以在整个屏幕的最顶层渲染子组件
使用
-
创建一个
OverlayEntry -
将一个组件作为
OverlayEntry的builder参数 -
将
OverlayEntry插入到Overlay中 -
在不需要时及时移除
OverlayEntry
OverlayEntry overlayEntry;
void showOverlay(BuildContext context) {
OverlayState overlayState = Overlay.of(context);
overlayEntry = OverlayEntry(
builder: (context) => Positioned(
left: 100,
top: 100,
child: Material(
child: Container(
width: 200,
height: 200,
color: Colors.amber,
child: Center(child: Text('这是 Overlay 组件')),
),
),
),
);
overlayState.insert(overlayEntry);
}
void removeOverlay() {
overlayEntry.remove();
}
IntrinsicHeight (根据子组件高度确定高度)
为子组件设置一个无限高度的约束,从而让子组件根据内容自动确定自身的高度,而不受父容器的高度约束影响
CustomSingleChildLayout （ 自定一单子布局组件 ）
自定义单个子组件在父容器中的布局规则。要实现自定义布局,需要提供一个
SingleChildLayoutDelegate的实现类,用于负责定义布局行为。
定义一个：子组件在父容器的横向3/4，纵向也是3/4处。
SingleChildLayoutDelegate 类的使用
必须实现三个抽象方法
getConstraintsForChild(BoxConstraints constraints)
该方法根据父容器的约束,返回应用于子组件的约束。在这调整子组件的约束条件,例如设置最大宽高或最小宽高。
getPositionForChild(Size size, Size childSize)
该方法根据父容器的大小(size)和子组件的大小(childSize)计算并返回子组件在父容器中的位置偏移量(Offset)。这是自定义布局的核心,在此实现自己的布局算法。
shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate)
该方法用于确定当布局委托发生变化时,是否需要触发重新布局。如果新旧委托相同,则可以返回 false 以提高性能。
画个图
代码实现
代理类
import 'package:flutter/material.dart';
class ThreeQuartersLayout extends SingleChildLayoutDelegate {
@override
BoxConstraints getConstraintsForChild(BoxConstraints constraints) {
return BoxConstraints(
maxHeight: constraints.maxHeight,
maxWidth: constraints.maxWidth,
);
}
@override
Offset getPositionForChild(Size size, Size childSize) {
double x = (size.width - childSize.width) *3 /4 ;
double y = (size.height - childSize.height) *3/ 4;
return Offset(x, y);
}
@override
bool shouldRelayout(ThreeQuartersLayout oldDelegate) => false;
}
布局使用
CustomSingleChildLayout(
delegate: ThreeQuartersLayout(),
child: Container(
width:50,
height: 50,
color: const Color(0xff7AAAEA),
),
)
效果图
转载自:https://juejin.cn/post/7370963861644869641