Flutter 使用换行对齐两个文本小部件

Posted

技术标签:

【中文标题】Flutter 使用换行对齐两个文本小部件【英文标题】:Flutter align two text widgets on extremes with a wrap 【发布时间】:2020-03-09 15:39:24 【问题描述】:

我想在一行中有两个文本小部件,一个在左侧,一个在右侧。如果文本太长,就会溢出。为了防止这种情况发生,我想在下面一行显示正确的文本。

这是我想要的:

这是我尝试使用 WrapAlignment.spaceBetweenWrap 小部件的方法:

@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 小部件测试点击 - 不会在指定的小部件上进行测试

Flutter - 如何对齐(小部件)孙小部件与孩子相同

Flutter Row:左右对齐,共享剩余空间

Flutter Container 在 Row 小部件内定位或对齐

Flutter - 如何在一行中显示文本和图标?

滚动小部件中的 Kivy 标签文本换行