是否可以在Wrap小部件中强制特定子控件的对齐?

import 'package:flutter/widgets.dart';import 'package:flutter/rendering.dart';import 'dart:math' as math;class LeftRightAlign extends MultiChildRenderObjectWidget { LeftRightAlign({ Key key, @required Widget left, @required Widget right, }) : super(key: key, children: [left, right]); @override RenderLeftRightAlign createRenderObject(BuildContext context) { return RenderLeftRightAlign(); }}class LeftRightAlignParentData extends ContainerBoxParentData<RenderBox> {}class RenderLeftRightAlign extends RenderBox with ContainerRenderObjectMixin<RenderBox, LeftRightAlignParentData>, RenderBoxContainerDefaultsMixin<RenderBox, LeftRightAlignParentData> { RenderLeftRightAlign({ List<RenderBox> children, }) { addAll(children); } @override void setupParentData(RenderBox child) { if (child.parentData is! LeftRightAlignParentData) child.parentData = LeftRightAlignParentData(); } @override void performLayout() { final BoxConstraints childConstraints = constraints.loosen(); final RenderBox leftChild = firstChild; final RenderBox rightChild = lastChild; leftChild.layout(childConstraints, parentUsesSize: true); rightChild.layout(childConstraints, parentUsesSize: true); final LeftRightAlignParentData leftParentData = leftChild.parentData; final LeftRightAlignParentData rightParentData = rightChild.parentData; final bool wrapped = leftChild.size.width + rightChild.size.width > constraints.maxWidth; leftParentData.offset = Offset.zero; rightParentData.offset = Offset( constraints.maxWidth - rightChild.size.width, wrapped ? leftChild.size.height : 0); size = Size( constraints.maxWidth, wrapped ? leftChild.size.height + rightChild.size.height : math.max(leftChild.size.height, rightChild.size.height)); } @override bool hitTestChildren(HitTestResult result, {Offset position}) { return defaultHitTestChildren(result, position: position); } @override void paint(PaintingContext context, Offset offset) { defaultPaint(context, offset); }}...class HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar(middle: Text('App')), child: ListView(children: <Widget>[ Container( margin: EdgeInsets.symmetric(horizontal: 32, vertical: 16), child: LeftRightAlign( left: Text( 'Left Widget', style: TextStyle(fontSize: 40), ), right: Text( 'Right Widget', style: TextStyle(fontSize: 40), ), ), ), Text('Next Line'), ]) ); }} I'm trying to create a layout in flutter consisting of a row with two child widgets, the first aligned to the left and the second aligned to the right, that also will wrap the widgets if the container is too narrow.This is similar to the question asked here Flutter align two items on extremes - one on the left and one on the right, which can be solved with a Wrap widget with alignment: WrapAlignment.spaceBetween. However when the widgets wrap using this method, the right widget wrapped to a new run is no longer right aligned. (screenshots)What I would like to happen is for the right widget to stay aligned to the right when it wraps. In css with flexbox this can be achieved with flex-grow:1 or margin-left:auto on the right widget as demonstrated in this codepen (resize the page width to see the layout I want to happen).So far in flutter I've tried:Wrapping the right widget in a Flexible widget to try and make it take up the remaining width when it's wrapped, so I can right align within it, but this throws the error: Incorrect use of ParentDataWidget. Flexible widgets must be placed inside Flex widgets.Wrapping the right widget inside an Align widget, but this always expands to the full width and causes wrapping even when the screen is wide enough for both widgets to be on the same rowUsing CustomMultiChildLayout with a MultiChildLayoutDelegate, which can create the correct layout, (screenshot) however it doesn't seem possible to set the height of the widget based on the child widget heights, forcing you to use an arbitrary height value. The docs for MultiChildLayoutDelegate saySo is it possible to create a layout where the right widget remains aligned to the right edge when it has to wrap? 解决方案 Thanks to Rémi Rousselet's advice to use a custom RenderBox here is a basic implementation that solves the layout problem (based off the Wrap widgets RenderBox implementation 1 2)import 'package:flutter/widgets.dart';import 'package:flutter/rendering.dart';import 'dart:math' as math;class LeftRightAlign extends MultiChildRenderObjectWidget { LeftRightAlign({ Key key, @required Widget left, @required Widget right, }) : super(key: key, children: [left, right]); @override RenderLeftRightAlign createRenderObject(BuildContext context) { return RenderLeftRightAlign(); }}class LeftRightAlignParentData extends ContainerBoxParentData<RenderBox> {}class RenderLeftRightAlign extends RenderBox with ContainerRenderObjectMixin<RenderBox, LeftRightAlignParentData>, RenderBoxContainerDefaultsMixin<RenderBox, LeftRightAlignParentData> { RenderLeftRightAlign({ List<RenderBox> children, }) { addAll(children); } @override void setupParentData(RenderBox child) { if (child.parentData is! LeftRightAlignParentData) child.parentData = LeftRightAlignParentData(); } @override void performLayout() { final BoxConstraints childConstraints = constraints.loosen(); final RenderBox leftChild = firstChild; final RenderBox rightChild = lastChild; leftChild.layout(childConstraints, parentUsesSize: true); rightChild.layout(childConstraints, parentUsesSize: true); final LeftRightAlignParentData leftParentData = leftChild.parentData; final LeftRightAlignParentData rightParentData = rightChild.parentData; final bool wrapped = leftChild.size.width + rightChild.size.width > constraints.maxWidth; leftParentData.offset = Offset.zero; rightParentData.offset = Offset( constraints.maxWidth - rightChild.size.width, wrapped ? leftChild.size.height : 0); size = Size( constraints.maxWidth, wrapped ? leftChild.size.height + rightChild.size.height : math.max(leftChild.size.height, rightChild.size.height)); } @override bool hitTestChildren(HitTestResult result, {Offset position}) { return defaultHitTestChildren(result, position: position); } @override void paint(PaintingContext context, Offset offset) { defaultPaint(context, offset); }}...class HomePageState extends State<HomePage> { @override Widget build(BuildContext context) { return CupertinoPageScaffold( navigationBar: CupertinoNavigationBar(middle: Text('App')), child: ListView(children: <Widget>[ Container( margin: EdgeInsets.symmetric(horizontal: 32, vertical: 16), child: LeftRightAlign( left: Text( 'Left Widget', style: TextStyle(fontSize: 40), ), right: Text( 'Right Widget', style: TextStyle(fontSize: 40), ), ), ), Text('Next Line'), ]) ); }} 这篇关于是否可以在Wrap小部件中强制特定子控件的对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！