嘗試將一個影像和三個標簽放在多列的一行中，僅使用 flex 布局而不使用嵌套的 flex 布局，需要一些幫助。
<XF.FlexLayout direction="Column">
<XF.CollectionView itemsSource={Bind.oneWay(() => this.viewModel.list)}
itemsLayout="VerticalList">
<XF.CollectionView.itemTemplate>
<XF.FlexLayout {...XF.FlexLayout.grow(1)}>
<XF.Label margin="10, 10, 10, 10" text={Bind.twoWays((x) => x.data.name)}
fontAttributes="Bold" fontSize={18}/>
<XF.Label text={Bind.twoWays((x) => x.data.description)}
fontSize={16} />
<XF.Label text={Bind.twoWays((x) => x.data.price)}
fontSize={16} />
<XF.ImageButton margin="10, 10, 10, 10" widthRequest={80} heightRequest={120} {...XF.FlexLayout.basis(100)}
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>
</XF.CollectionView.itemTemplate>
</XF.CollectionView>
</XF.FlexLayout>
</XF.ContentPage>
uj5u.com熱心網友回復：
您可以使用Grid它來實作它：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="1" />
<Label text="lbl1" Grid.Row="0" Grid.Column="2" />
<Label text="lbl2" Grid.Row="0" Grid.Column="3" />
<Label text="lbl3" Grid.Row="0" Grid.Column="4" />
</Grid>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/325257.html