Xamarin.Forms 用FlexLayout无嵌套实现单图片加3标签多列同行布局求助

• 首先给XF.CollectionView.itemTemplate下的根FlexLayout添加direction="Row"、wrap="Wrap"属性，开启横向排列+自动换行能力，这是不嵌套Flex实现多列垂直内容的核心。
• 调整各子元素的Flex布局属性，通过basis控制元素占位宽度，利用换行规则实现分列：
  • 图片保留order=-1排在最左侧，basis设置为80和宽度请求匹配，独占左列垂直空间
  • 三个Label的basis统一设置为calc(100% - 310px)（总宽度减去左侧图片80+右侧按钮150+预留边距的宽度），刚好占满图片和按钮之间的中间宽度，三个Label会自动在中间区域从上到下垂直排列
  • Details按钮添加alignSelf="Center"属性实现垂直居中，放在最右列

修改后完整代码如下：

<XF.FlexLayout direction="Column">
    <XF.CollectionView itemsSource={Bind.oneWay(() => this.viewModel.list)}
        itemsLayout="VerticalList">
        <XF.CollectionView.itemTemplate>
            <XF.FlexLayout {...XF.FlexLayout.grow(1)} direction="Row" wrap="Wrap">
                <XF.Label margin="10, 10, 10, 10" text={Bind.twoWays((x) => x.data.name)}
                    fontAttributes="Bold" fontSize={18} {...XF.FlexLayout.basis('calc(100% - 310px)')}/>
                <XF.Label text={Bind.twoWays((x) => x.data.description)}
                    fontSize={16} {...XF.FlexLayout.basis('calc(100% - 310px)')} />
                <XF.Label text={Bind.twoWays((x) => x.data.price)}
                    fontSize={16} {...XF.FlexLayout.basis('calc(100% - 310px)')} />
                <XF.ImageButton margin="10, 10, 10, 10" widthRequest={80} heightRequest={120} {...XF.FlexLayout.basis(80)}
                    source={Bind.twoWays((x) => x.data.url)}
                    aspect="AspectFill"
                    {...XF.FlexLayout.order(-1)} />
                <XF.Button {...XF.FlexLayout.basis(150)}
                    margin="10, 10, 10, 10"
                    heightRequest={50}
                    widthRequest={150}
                    text="Details"
                    borderRadius="6"
                    backgroundColor="#F26857"
                    borderColor="#F26857"
                    borderWidth={2}
                    textColor={Colors.white} 
                    {...XF.FlexLayout.alignSelf("Center")}/>
            </XF.FlexLayout>
        </XF.CollectionView.itemTemplate>
    </XF.CollectionView>
</XF.FlexLayout>
</XF.ContentPage>

如果不需要适配不同宽度的设备，也可以直接把Label的basis设置为固定数值，根据你的实际布局宽度调整即可。

内容的提问来源于stack exchange，提问作者Srikanth Naidu