MAUI中TabbedPage标签栏滚动及标题宽度适配问题咨询

针对你的两个需求，直接通过MAUI的Android平台特定属性即可实现，以下是具体修改方案：

1. 实现标签栏可滚动 #

在TabbedPage标签中添加Android平台专属的TabMode属性并设置为Scrollable，当标签数量超出屏幕宽度时，标签栏会自动变为横向可滚动模式。

2. 让标签项标题宽度自适应 #

配合TabMode="Scrollable"，将TabGravity属性设置为Center（默认值，显式声明更清晰），此时每个标签的宽度会根据标题内容自动调整，而非强制平分屏幕宽度。

修改后的完整XAML代码 #

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage  xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBlazorDemoApp.Views.MenuDetailPage"
             xmlns:model="clr-namespace:MauiBlazorDemoApp.Models"
             ItemsSource="{x:Static model:MenuClass.MenuClasses}"
             xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
             android:TabbedPage.OffscreenPageLimit="2"
             android:TabbedPage.IsSmoothScrollEnabled="True"
             android:TabbedPage.IsSwipePagingEnabled="true"
             android:TabbedPage.ToolbarPlacement="Top"
             android:TabbedPage.TabMode="Scrollable"
             android:TabbedPage.TabGravity="Center"
             FlowDirection="LeftToRight"
             Title="MenuDetailPage">
    
    <TabbedPage.ItemTemplate>
        <DataTemplate>
            <ContentPage Title="{Binding Name}">
                <StackLayout Padding="5, 25">
                    <Label Text="{Binding Name}"
                           FontAttributes="Bold"
                           FontSize="18"
                           HorizontalOptions="Center" />
                   
                    <StackLayout Padding="50, 10">
                        <StackLayout Orientation="Horizontal">
                            <Label Text="Family: "
                                   FontAttributes="Bold" />
                            <Label Text="{Binding Sort}" />
                        </StackLayout>
                    </StackLayout>
                </StackLayout>
            </ContentPage>
        </DataTemplate>
    </TabbedPage.ItemTemplate>
</TabbedPage>

关键属性说明 #

• android:TabbedPage.TabMode="Scrollable"：强制标签栏采用滚动模式，支持横向滑动查看超出屏幕的标签。
• android:TabbedPage.TabGravity="Center"：让标签宽度自适应标题内容，总宽度未超出屏幕时标签居中排列，超出时则进入滚动状态。

另外，你之前在ContentPage上设置的WidthRequest="1300"无效（ContentPage宽度由父容器决定），已移除该属性。

内容的提问来源于stack exchange，提问作者Peter Zhang