Question

我需要创建带有多选选项的标头，如下图所示，问题是我知道如何创建具有分组的多选列表，但我无法在水平布局中获得此类选项，并且此选项是动态的根据传递的数据，他们应该创建，用户可以在单击时选择和取消选择此选项。谁能告诉我应该使用哪种方法或如何实现这种功能

Answer 1

解决方案：

您可以使用listview + custom wraplayout来满足您的要求。

我从此thread中获取布局代码：

创建一个新的继承自Layout的子类：

覆盖OnMeasure以返回此布局的大小。



覆盖LayoutChildren以确定子级的位置和大小。



创建可绑定属性以个性化每种需求。

自定义布局：

public class WrapLayout : Layout<View>
{
    public static readonly BindableProperty SpacingProperty =
        BindableProperty.Create
        (
            "Spacing",
            typeof(double),
            typeof(WrapLayout),
            10.0,
            propertyChanged: (bindable, oldvalue, newvalue) => ((WrapLayout)bindable).OnSizeChanged()
        );

    public double Spacing
    {
        get { return (double)GetValue(SpacingProperty); }
        set { SetValue(SpacingProperty, value); }
    }

    private void OnSizeChanged()
    {
        this.ForceLayout();
    }

    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
    {
        if (WidthRequest > 0)
            widthConstraint = Math.Min(widthConstraint, WidthRequest);
        if (HeightRequest > 0)
            heightConstraint = Math.Min(heightConstraint, HeightRequest);

        double internalWidth = double.IsPositiveInfinity(widthConstraint) ? double.PositiveInfinity : Math.Max(0, widthConstraint);
        double internalHeight = double.IsPositiveInfinity(heightConstraint) ? double.PositiveInfinity : Math.Max(0, heightConstraint);

        return DoHorizontalMeasure(internalWidth, internalHeight);
    }

    private SizeRequest DoHorizontalMeasure(double widthConstraint, double heightConstraint)
    {
        int rowCount = 1;

        double width = 0;
        double height = 0;
        double minWidth = 0;
        double minHeight = 0;
        double widthUsed = 0;

        foreach (var item in Children)
        {
            var size = item.Measure(widthConstraint, heightConstraint);

            height = Math.Max(height, size.Request.Height);

            var newWidth = width + size.Request.Width + Spacing;
            if (newWidth > widthConstraint)
            {
                rowCount++;
                widthUsed = Math.Max(width, widthUsed);
                width = size.Request.Width;
            }
            else
                width = newWidth;

            minHeight = Math.Max(minHeight, size.Minimum.Height);
            minWidth = Math.Max(minWidth, size.Minimum.Width);
        }

        if (rowCount > 1)
        {
            width = Math.Max(width, widthUsed);
            height = (height + Spacing) * rowCount - Spacing; // via MitchMilam 
        }

        return new SizeRequest(new Size(width, height), new Size(minWidth, minHeight));
    }

    protected override void LayoutChildren(double x, double y, double width, double height)
    {
        double rowHeight = 0;
        double yPos = y, xPos = x;

        foreach (var child in Children.Where(c => c.IsVisible))
        {
            var request = child.Measure(width, height);

            double childWidth = request.Request.Width;
            double childHeight = request.Request.Height;
            rowHeight = Math.Max(rowHeight, childHeight);

            if (xPos + childWidth > width)
            {
                xPos = x;
                yPos += rowHeight + Spacing;
                rowHeight = 0;
            }

            var region = new Rectangle(xPos, yPos, childWidth, childHeight);
            LayoutChildIntoBoundingRegion(child, region);
            xPos += region.Width + Spacing;
        }
    }
}

在您的xaml中，将listView与viewcell中的布局按钮一起使用：

<ListView x:Name="EmployeeView" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <StackLayout BackgroundColor="LightBlue" Orientation="Horizontal">
                                <Label Text="qwewqe" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"></Label>
                                <Button Text="save" HorizontalOptions="EndAndExpand"></Button>
                            </StackLayout>
                            <StackLayout>
                                <local:WrapLayout Spacing="5">
                                <Button Text="   self   " BackgroundColor="Red"/>
                                <Button Text="   mother   " BackgroundColor="Green"/>
                                <Button Text="   father   " BackgroundColor="Gray"/>
                                <Button Text="   grandmother   " BackgroundColor="Blue"/>
                                <Button Text="   sister   " BackgroundColor="Orange"/>
                                <Button Text="   brother   " BackgroundColor="Aqua"/>
                                <Button Text="   self   " BackgroundColor="Yellow"/>
                                <Button Text="   grandfather   " BackgroundColor="Pink"/>
                                </local:WrapLayout>
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

请记住设置列表视图的dataSource，您可以查看结果：

您可以在ViewCell中更改布局以使其看起来更好。尝试让我满足您的要求吗？

我正在尝试通过水平列表选项分组实现多选列表

1 个答案: