Flutter将两个文本小部件对齐并对齐

2024-05-20 • 问答

我想连续放置两个文本小部件，一个在左侧，一个在右侧。如果文本太长，将会溢出。为了防止这种情况，我想在这种情况下在下面的一行中显示正确的文本。

这就是我想要的：

这是我使用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,children: <Widget>[
    Align(alignment: Alignment.topLeft,child: Text('left side')),Align(alignment: Alignment.topRight,child: Text('right side')),)

但是，这也没有产生预期的结果：

谢谢你。

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);
  }
}

所有对詹门斯（：

Flutter将两个文本小部件对齐并对齐

sun7777777 回答：Flutter将两个文本小部件对齐并对齐

大家都在问