Flutter 使用换行对齐两个文本小部件
Posted
技术标签:
【中文标题】Flutter 使用换行对齐两个文本小部件【英文标题】:Flutter align two text widgets on extremes with a wrap 【发布时间】:2020-03-09 15:39:24 【问题描述】:我想在一行中有两个文本小部件,一个在左侧,一个在右侧。如果文本太长,就会溢出。为了防止这种情况发生,我想在下面一行显示正确的文本。
这是我想要的:
这是我尝试使用 WrapAlignment.spaceBetween
和 Wrap
小部件的方法:
@override
Widget build(BuildContext context)
return Wrap(
alignment: WrapAlignment.spaceBetween,
spacing: 16,
children: <Widget>[
Text('a long text on the left side', textAlign: TextAlign.start),
Text('a long text on the right side', textAlign: TextAlign.end),
],
);
但是,两个文本都粘在左侧:
我已经尝试使用 Align 小部件,但没有取得预期的成功。这是我尝试的代码:
Wrap(
alignment: WrapAlignment.spaceBetween,
spacing: 16,
children: <Widget>[
Align(alignment: Alignment.topLeft, child: Text('left side')),
Align(alignment: Alignment.topRight, child: Text('right side')),
],
)
但是,这也没有产生预期的结果:
提前致谢。
【问题讨论】:
也许你可以试试Column
,带有2个Row
小部件,一个带有mainAxisAlignment: MainAxisAlignment.start
,另一个带有mainAxisAlignment: MainAxisAlignment.end
感谢您的想法,但在这种情况下,两个文本字段将在另一个下方显示。
【参考方案1】:
I've found the solution here that works perfectly.
@override
Widget build(BuildContext context)
return LeftRightAlign(
left: Text('left side',),
right: Text('right side'),
);
这是自定义 LeftRightAlign
小部件的代码:
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);
所有功劳归于 Jamens (:
【讨论】:
以上是关于Flutter 使用换行对齐两个文本小部件的主要内容,如果未能解决你的问题,请参考以下文章
Flutter 小部件测试点击 - 不会在指定的小部件上进行测试