xamarin表单：flex布局如何适应大于容器的内容答案

【问题标题】：xamarin form: flex layout how do fit the contents which larger than containerxamarin表单：flex布局如何适应大于容器的内容
【发布时间】：2019-07-09 03:57:18
【问题描述】：

<FlexLayout Direction="Row" JustifyContent="Start">

                    <circle:CircleImage
                        BackgroundColor="Blue"
                        Style="{StaticResource profileStyle}"
                        Source="{Binding TeacherSource}">
                    </circle:CircleImage>

                    <FlexLayout 

                        FlexLayout.Grow="1"
                        Direction="Column" 
                        BackgroundColor="Red" 
                        JustifyContent="SpaceEvenly">

                        <Label Text="{Binding TeacherName}"    Style="{DynamicResource ListItemTextStyle}"></Label>
                        <Label Text="{Binding TeacherEmail}"   Style="{DynamicResource ListItemTextStyle}"></Label>
                        <Label Text="{Binding TeacherMobile}"  Style="{DynamicResource ListItemTextStyle}"></Label>
                        <Label Text="{Binding TeacherHome}"    Style="{DynamicResource ListItemTextStyle}"></Label>
                        <Label Text="{Binding TeacherWork}"    Style="{DynamicResource ListItemTextStyle}"></Label>

                    </FlexLayout>

                </FlexLayout>

上面的 xaml 是在 listview 中使用的数据模板内创建的。我可以显示内容，但最后一个标签没有扩展 flexlayout 以适应所有内容。

下图：

【问题讨论】：

标签： listview xamarin layout

【解决方案1】：

我尝试了您的代码，但没有找到让flexlayout 自动扩展的解决方案。我试过ForceUpdateSize，但没有运气。

如果只有一个FlexLayout，它会起作用：

<FlexLayout 
             FlexLayout.Grow="1"
             Direction="Column" 
             BackgroundColor="Red" 
             JustifyContent="SpaceEvenly">

             <Label Text="{Binding TeacherName}"    Style="{DynamicResource ListItemTextStyle}"></Label>
             <Label Text="{Binding TeacherEmail}"   Style="{DynamicResource ListItemTextStyle}"></Label>
             <Label Text="{Binding TeacherMobile}"  Style="{DynamicResource ListItemTextStyle}"></Label>
             <Label Text="{Binding TeacherHome}"    Style="{DynamicResource ListItemTextStyle}"></Label>
             <Label Text="{Binding TeacherWork}"    Style="{DynamicResource ListItemTextStyle}"></Label>    
    </FlexLayout>

我找到了一个Workaroud：

将您的 flexLayout 更改为 StackLayout 即可：

<FlexLayout Direction="Row" JustifyContent="Start">

          <Image Source="Images"></Image>

           <StackLayout Orientation="Vertical">

                <Label Text="{Binding Name}"></Label>
                <Label Text="{Binding Image}"></Label>
                <Label Text="{Binding Image}"></Label>
                <Label Text="{Binding Image}"></Label>
                <Label Text="{Binding Image}"></Label>        
           </StackLayout>

 </FlexLayout>

记住设置你的listView HasUnevenRows="True"，不要设置rowheight。

【讨论】：

更改为 StackLayout 效果很好。谢谢