Xamarin.Form中使用TableView实现类设置页面的功能是否可行？

核心适配思路 #

• 首先把TableView的Intent属性设置为Settings，这个预设值就是专门针对设置页场景优化的，会自动适配各平台原生设置页的默认交互和样式基础
• 用TableSection实现设置项的分组，可直接配置分组头部标题，对应目标界面的分组效果
• 每个设置项通过自定义ViewCell实现不同样式：
  • 带跳转箭头的项：在ViewCell内放横向布局，左侧放设置项标题Label，右侧放箭头图标，绑定点击事件处理页面跳转逻辑即可
  • 带开关的项：横向布局左侧放标题Label，右侧放Switch组件，绑定对应属性控制开关状态
  • 带右侧说明文本的项：横向布局内放两个Label，左侧为标题，右侧为说明文本，可按需调整颜色字体

示例代码片段 #

<TableView Intent="Settings">
    <TableRoot>
        <TableSection Title="通用设置">
            <ViewCell Tapped="OpenNotificationSetting">
                <StackLayout Orientation="Horizontal" Padding="15,10" VerticalOptions="Center">
                    <Label Text="消息通知" FontSize="16" HorizontalOptions="StartAndExpand"/>
                    <Image Source="arrow_right.png" WidthRequest="16" HeightRequest="16" HorizontalOptions="End"/>
                </StackLayout>
            </ViewCell>
            <ViewCell>
                <StackLayout Orientation="Horizontal" Padding="15,10" VerticalOptions="Center">
                    <Label Text="深色模式" FontSize="16" HorizontalOptions="StartAndExpand"/>
                    <Switch IsToggled="{Binding IsDarkMode}" HorizontalOptions="End"/>
                </StackLayout>
            </ViewCell>
        </TableSection>
        <TableSection Title="关于">
            <ViewCell Tapped="CheckUpdate">
                <StackLayout Orientation="Horizontal" Padding="15,10" VerticalOptions="Center">
                    <Label Text="版本更新" FontSize="16" HorizontalOptions="StartAndExpand"/>
                    <Label Text="V2.3.1" FontSize="14" TextColor="Gray" Margin="0,0,10,0" HorizontalOptions="End"/>
                    <Image Source="arrow_right.png" WidthRequest="16" HeightRequest="16" HorizontalOptions="End"/>
                </StackLayout>
            </ViewCell>
        </TableSection>
    </TableRoot>
</TableView>

样式优化说明 #

如果需要和目标界面样式完全对齐，可自定义ViewCell的高度、分隔线样式、字体颜色，也可以通过自定义渲染器抹平各平台的原生样式差异，完全可以做到1:1还原效果。

内容的提问来源于stack exchange，提问作者Tyrone Magwade