You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

.NET Maui中CollectionView内Label无法按LineBreakMode自动换行问题

MAUI中HorizontalStackLayout内Label文本自动换行失效问题

在HorizontalStackLayout中放置了一张图片和包含Label的VerticalStackLayout,用于展示Subject内容。小屏设备上,期望Subject能根据设备宽度及Label的LineBreakMode自动换行,但实际未生效。手动设置VerticalStackLayout宽度后文本会换行,但我希望实现自动适配。使用环境为VS 2022 v17.3.0 Preview 4.0,相关代码如下:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:model ="clr-namespace:fotbollz.Model"
             x:Class="fotbollz.MainPage">

    <CollectionView>
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type model:NewsItem}">
                <model:NewsItem Created="2022-07-27" Updated="2022-07-27 12:15"  
                                Subject="ÖFK klar för Allsvenskan igen och man är jätteglada!"  
                                Author="Firstname Lastname" 
                                ClubLogo="https://fotbollz.se/_upload/teams/logo/ofk_logo.gif" />
                <model:NewsItem Created="2022-07-27 14:02" Updated="2022-07-27 12:15"  Subject="Min rubrik2"  Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ofk_logo.gif" />
                <model:NewsItem Created="2022-07-27 12:03" Updated="2022-07-27 12:15"  Subject="Ytterhogdal vinner igen!"  Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ytterhogdal_logo.gif" />
                <model:NewsItem Created="2022-07-27 12:04" Updated="2022-07-27 12:15"  Subject="Min rubrik4"  Author="Firstname Lastname" ClubLogo="https://fotbollz.se/_upload/teams/logo/ifk_logo.gif" />
                <model:NewsItem Created="2022-07-27 12:05" Updated="2022-07-27 12:15"  Subject="Häggenås spelade oavgjort!"  Author="Myggan Handler" ClubLogo="https://fotbollz.se/_upload/teams/logo/haggenas.png" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate x:DataType="model:NewsItem">
                <HorizontalStackLayout Padding="5">
                    <!-- 俱乐部Logo图片 -->
                    <Image Source="{Binding ClubLogo}" HeightRequest="75" WidthRequest="75" Aspect="AspectFill" />

                    <!-- 新闻的标题、作者和发布日期
                    问题:长文本为何没有按照LineBreakMode设置自动换行?手动设置WidthRequest="275"后文本才会换行。
                    -->
                    <VerticalStackLayout Padding="5" HorizontalOptions="Center">
                        <Label Text="{Binding Subject}" FontSize="14" LineBreakMode="MiddleTruncation" MaxLines="1" FontAttributes="Bold" />
                        <Label FontSize="12" >
                            <Label.Text>
                                <MultiBinding StringFormat="{}{0:yyyy-MM-dd HH:mm} Av: {1}">
                                    <Binding Path="Created" />
                                    <Binding Path="Author" />
                                </MultiBinding>
                            </Label.Text>
                        </Label>
                        <Label Text="{Binding Ingress}" FontSize="18" />

                    </VerticalStackLayout>
                </HorizontalStackLayout>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

预期效果为长Subject文本在图片右侧根据剩余屏幕宽度自动截断换行,实际效果为长文本超出屏幕范围,未按LineBreakMode设置处理。

内容的提问来源于stack exchange,提问作者KlausKurzawa

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 05:54:16