FlexLayout为什么不滚动？

huangapple
go评论70阅读模式
英文:

Why is FlexLayout not scrolling?

问题

Consider the two .NET MAUI (Android) pages below:

Page 1:

FlexLayout为什么不滚动？

<ContentPage ...>
    <ScrollView>
        <VerticalStackLayout>
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </VerticalStackLayout>
    </ScrollView>
</ContentPage>

Page 2:

FlexLayout为什么不滚动？

<ContentPage ...>
    <ScrollView>
        <FlexLayout Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
            <Label Text="The good movie 1" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 2" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 3" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 4" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 5" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 6" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 7" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 8" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 9" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 10" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 11" FontSize="40" WidthRequest="140" />
            <Label Text="The good movie 12" FontSize="40" WidthRequest="140" />
        </FlexLayout>
    </ScrollView>
</ContentPage>

In Page 1, the text in the label is displayed entirely, and you can scroll to see all the labels.

But in Page 2, it seems like all the labels are shrunk to fit on the screen vertically, and only the beginning of the text on the label is displayed.

How can I get the text on the label to be displayed entirely and the screen to scroll with FlexLayout?

+++++++ Added +++++++

This is what I get with only 4 labels.

FlexLayout为什么不滚动？

It seems like they fill all the vertical space.
What about ScrollView?

英文:

Consider the two .NET MAUI (Android) pages below:

Page 1:

FlexLayout为什么不滚动？

&lt;ContentPage ...&gt;

    &lt;ScrollView&gt;
        &lt;VerticalStackLayout&gt;
            &lt;Label Text=&quot;The good movie 1&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 2&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 3&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 4&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 5&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 6&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 7&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 8&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 9&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 10&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 11&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 12&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
        &lt;/VerticalStackLayout&gt;
    &lt;/ScrollView&gt;

&lt;/ContentPage&gt;

Page 2:

FlexLayout为什么不滚动？

&lt;ContentPage ...&gt;

    &lt;ScrollView&gt;
        &lt;FlexLayout Direction=&quot;Row&quot; Wrap=&quot;Wrap&quot; JustifyContent=&quot;SpaceEvenly&quot;&gt;
            &lt;Label Text=&quot;The good movie 1&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 2&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 3&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 4&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 5&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 6&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 7&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 8&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 9&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 10&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 11&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
            &lt;Label Text=&quot;The good movie 12&quot; FontSize=&quot;40&quot; WidthRequest=&quot;140&quot; /&gt;
        &lt;/FlexLayout&gt;
    &lt;/ScrollView&gt;

&lt;/ContentPage&gt;

In Page 1, the text in the label is displayed entirely, and I can scroll to see all the labels.

But in Page 2, it seems like all the labels are shrunk to fit on the screen vertically, and only the beginning of the text on the label is displayed.

How can I get the text on the label to be displayed entirely and the screen to scroll with FlexLayout ?

+++++++ Added +++++++

This is what I get with only 4 labels.

FlexLayout为什么不滚动？

It seems like they fill all the vertical space.
What about ScrollView ?

答案1

得分: 1

当将FlexLayout设置为ScrollView的子元素时，内容不会滚动。总之，这是一个已知问题，可以在以下链接中跟踪，您可以在那里进行跟进。

https://github.com/dotnet/maui/issues/5091

作为替代解决方法，您可以使用VerticalStackLayout、StackLayout或Grid来替代FlexLayout，如下所示：

<ScrollView>
    <StackLayout>
        
        \\
    </StackLayout>
</ScrollView>
英文:

When Setting FlexLayout as the Child of ScrollView, the Content does not scroll. In conclusion, this is a known issue that being tracked in the link below, you can follow up there.

https://github.com/dotnet/maui/issues/5091

As an alternative workaround, you can use VerticalStackLayout ,StackLayout or Grid instead of FlexLayout like below:

&lt;ScrollView&gt;
        &lt;StackLayout&gt;
            
              \\\
        &lt;/StackLayout&gt;
&lt;/ScrollView&gt;

huangapple
  • 本文由 发表于 2023年2月10日 05:42:54
  • 转载请务必保留本文链接：https://go.coder-hub.com/75404715.html
  • maui
  • maui-android
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定