Question

我想使flexlayout自动调整其宽度。

当我不使用flexlayout而是仅使用标签

    <Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">                                        
        <Label Text="测试员013号" TextColor="#ffffff" FontSize="18"/>                                      
</Frame>

是的，它自动适合标签的大小。但是当我添加flexlayout时，它会自动采用最大宽度作为其宽度：

<Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
                                        <FlexLayout Direction="Row">
                                            <Label Text="测试员013号" TextColor="#ffffff" FontSize="18"/>
                                        </FlexLayout>
                                    </Frame>

因为我将在框架中添加多个视图，而不只是一个标签。无论如何，是否可以使框架自动适合所有视图的总宽度？

Answer 1

似乎您使用Grid来直接显示此Frame，这将占用第二列的所有空间。您可以使用额外的StackLayout对其进行包装以解决此问题：

<ContentPage.Content>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <StackLayout Orientation="Horizontal">
            <Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
                <FlexLayout Direction="Row">
                    <Label Text="测试员013号" TextColor="#ffffff" FontSize="18" />
                </FlexLayout>
            </Frame>
        </StackLayout>
    </Grid>

</ContentPage.Content>

但是，我注意到您只使用了FlexLayout的“方向”功能，我认为StackLayout可能是更好的选择：

<ContentPage.Content>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>
        <Frame BackgroundColor="#5fb878" Padding="10" HasShadow="false" HorizontalOptions="EndAndExpand" Margin="0" Grid.Column="1">
            <StackLayout Orientation="Horizontal">
                <Label Text="测试员013号" TextColor="#ffffff" FontSize="18" />
                <Label Text="second label"/>
            </StackLayout>
        </Frame>
    </Grid>

</ContentPage.Content>

flexLayout如何自动调整宽度？

1 个答案: