是否可以强制对齐 Wrap 小部件中的特定子小部件? [英] Is it possible to force the alignment of a specific child widget in a Wrap widget?

问题描述

我正在尝试在 Flutter 中创建一个布局，该布局由具有两个子小部件的行组成，第一个向左对齐，第二个向右对齐，如果容器太窄，它也会包裹小部件.

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.

这类似于此处提出的问题 Flutter 将两个项目对齐到极端 - 一个在左边，一个在右边，这可以通过带有 alignment 的 Wrap 小部件来解决:WrapAlignment.spaceBetween.但是，当使用此方法包装小部件时，包装到新运行的右侧小部件不再右对齐.(截图)

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)

我希望正确的小部件在包裹时保持与右侧对齐.在带有 flexbox 的 css 中，这可以通过右侧小部件上的 flex-grow:1 或 margin-left:auto 来实现，如 codepen (调整页面宽度以查看我想要的布局).

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:

• 将正确的小部件包装在 Flexible 小部件中以尝试使其在包装时占据剩余宽度，以便我可以在其中右对齐，但这会引发错误:

• Wrapping the right widget in a Flexible widget 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.

• 将右侧的小部件包裹在 Align 小部件中，但这总是会扩展到全宽并导致包裹，即使屏幕足够宽以使两个小部件位于同一行也是如此
• 将 CustomMultiChildLayout 与 MultiChildLayoutDelegate 一起使用，可以创建正确的布局，(screenshot) 但是似乎无法根据子小部件的高度设置小部件的高度，从而迫使您使用任意高度值.MultiChildLayoutDelegate 的文档说
• Wrapping the right widget inside an Align widget, 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 CustomMultiChildLayout with a MultiChildLayoutDelegate, 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

覆盖 getSize 以控制布局的整体大小.布局的大小不能依赖于子级的布局属性.

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?

推荐答案

感谢 Rémi Rousselet 的建议，使用自定义 RenderBox 这里是解决布局问题的基本实现(基于 Wrap 小部件 RenderBox 实现 1 2)

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屋！