Flex Layout , Xamarin Forms one image with three labels-CodePudding

Trying to put one image and three label in a row with multiple columns just using flex layout and without nested flex layout, need some help.

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

CodePudding user response：

You can use Grid to achieve it:

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