是否可以在Wrap小部件中强制特定子控件的对齐? [英] Is it possible to force the alignment of a specific child widget in a Wrap widget?
问题描述
我正试图在flutter中创建一个布局，该布局由具有两个子小部件的行组成，第一个子部件向左对齐，第二个子部件向右对齐，如果容器太窄，也将包装这些小部件. /p>
这类似于此处颤动"将两个项目在极端位置对齐-一个在左边，另一个在右边，这可以通过带有alignment: WrapAlignment.spaceBetween的Wrap小部件来解决.但是，当小部件使用此方法包装时，包装到新运行的正确小部件将不再右对齐. (屏幕截图)
我想发生的是正确的窗口小部件在包装时保持与右边对齐.在具有flexbox的css中，这可以通过右窗口小部件上的flex-grow:1或margin-left:auto来实现，如此屏幕快照)，但似乎无法根据子窗口小部件的高度设置窗口小部件的高度，从而迫使您使用任意高度值. 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
Flexiblewidget 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
Alignwidget, 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
CustomMultiChildLayoutwith aMultiChildLayoutDelegate, 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小部件中强制特定子控件的对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
