我正试图在flutter中创建一个布局，该布局由具有两个子小部件的行组成，第一个子部件向左对齐，第二个子部件向右对齐，如果容器太窄，也将包装这些小部件. /p>
这类似于此处颤动"将两个项目在极端位置对齐-一个在左边，另一个在右边，这可以通过带有alignment: WrapAlignment.spaceBetween的Wrap小部件来解决.但是，当小部件使用此方法包装时，包装到新运行的正确小部件将不再右对齐. (屏幕截图)
我想发生的是正确的窗口小部件在包装时保持与右边对齐.在具有flexbox的css中，这可以通过右窗口小部件上的flex-grow:1或margin-left:auto来实现，如此 codepen (调整页面宽度以查看我想要的布局).
到目前为止，我已经尝试过:
- 在Flexible小部件中包装正确的小部件以尝试使其在包装时占据剩余宽度，因此我可以在其中对齐，但这会引发错误:
- 在Align小部件内包装正确的小部件，但这总是扩展到整个宽度，即使屏幕足够宽，两个小部件都位于同一行，也会导致自动包装
- 将CustomMultiChildLayout与MultiChildLayoutDelegate结合使用，可以创建正确的布局，(屏幕快照)，但似乎无法根据子窗口小部件的高度设置窗口小部件的高度，从而迫使您使用任意高度值. MultiChildLayoutDelegate的文档说
重写getSize以控制布局的整体大小.布局的大小不能取决于子项的布局属性.
是否可以创建一个布局，使右小部件在必须包装时仍保持与右边缘对齐?
解决方案感谢RémiRousselet建议使用自定义RenderBox，这是解决布局问题的基本实现(基于Wrap小部件RenderBox实施 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'), ]) ); } }
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:
- 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 row
- Using 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 say
Override getSize to control the overall size of the layout. The size of the layout cannot depend on layout properties of the children.
So 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小部件中强制特定子控件的对齐?
发布评论