FlutterComponent最佳实践之角对准

发布时间：2023-03-23 13:32:40 所属栏目：教程来源：

导读：Flutter布局千千万，虽然Box模型相比于原生布局来说，在大部分场景下都是更加方便了，但是有些场景，确实还是ConstraintLayout来的更方便一点，例如下面这个场景：「将不定长度的角标，放置于容器右上角，同时角标中

Flutter布局千千万，虽然Box模型相比于原生布局来说，在大部分场景下都是更加方便了，但是有些场景，确实还是ConstraintLayout来的更方便一点，例如下面这个场景：「将不定长度的角标，放置于容器右上角，同时角标中心和容器角顶点对齐」，这其实是一个常见的需求，几乎在UI中的角标场景下都会用到，只不过大部分时候，直接写死一个差不多的偏移量，用Stack就可以实现了，但如果要求特别精准，Flutter的自带Widget就无法满足需求了（通过Key计算的方式就不说了，有点太浪费性能了）。

CustomMultiChildLayout
我们的想法是，传入两个Widget，一个用来做普通的布局，一个用来做角标，角标中心和布局的右上角订单对齐。

所以，先创建CustomMultiChildLayout。

Container(
height: 300,width: 300,color: Colors.yellow,child: CustomMultiChildLayout(
delegate: CornerPositionDelegate(),children: [
LayoutId(
id: 1,child: Container(
color: Colors.redAccent,width: 100,height: 100,),LayoutId(
id: 2,child: Container(
color: Colors.green,width: 30,height: 30,],)
这些都是基本功了，不啰嗦了。

在delegate中，我们来实现布局逻辑。

class CornerPositionDelegate extends MultiChildLayoutDelegate {
@override
void performlayout(Size size) {
Size size1 = Size.zero,size2 = Size.zero;
if (hasChild(1)) {
size1 = layoutChild(1,BoxConstraints.loose(size));
positionChild(1,Offset.zero);
}
if (hasChild(2)) {
size2 = layoutChild(2,BoxConstraints.loose(size));
positionChild(2,Offset(0,size1.height));
}
}
@override
bool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => true;
}
针对每个child，我们来依次布局，通过layoutChild，传入约束，从而获取Size，接下来调用positionChild，为指定id的child进行布局，通过Offset来调整布局的位置。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!