Flutter 用換行對齊兩個文本小部件

Question

我想連續有兩個文本小部件，一個在左邊，一個在右邊。 如果文本太長，就會出現溢出。 為了防止這種情況，我想在這種情況下在下面一行顯示正確的文本。

這是我想要的：

這是我嘗試使用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')),
  ],
)

但是，這也沒有產生預期的結果：

提前致謝。

Answer 1

我在這里找到了完美的解決方案。

@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的所有學分（：