我已经为ios,android和windows平台设计了Xamarin表单的分组列表视图.当我在列表视图中设置GroupShortNameBindingproperty时,垂直索引(跳转列表)会自动出现在IOS中.但跳转列表不会出现在android中.如何使用自定义渲染在android和windows中获得垂直索引的支持.如果任何人都可以提供跨平台支持此功能的自定义渲染源.
解决方法
如果你不想要CustomRenders,最简单的方法是使用XAML hack.
您可以将ListView包装在RelativeLayout中,其高度和宽度等于父(内容页面).
对于列表视图,使用height作为父级,宽度为父级的90%.
添加宽度为10%的堆栈布局,从相对布局的90%开始,高度为父级.使其方向垂直.将所有字母表添加到堆栈布局作为标签,并在其特定位置实现其TapGesture到ScrollTo.
Android的宽度为90%仅适用于iOS,Windows保持为100%,堆栈布局宽度为0%,IsVisible = false.
viewmodel:
public class JumpListviewmodel : INotifyPropertyChanged { private ObservableCollection<Item> _allItems; private List<string> _alphabetList; public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator] protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) => PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName)); public JumpListviewmodel() { AllItems = new ObservableCollection<Item>(new List<Item> { new Item { MyText = "1" },new Item { MyText = "2" },new Item { MyText = "3" } }); AlphabetList = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".tocharArray().Select(x => x.ToString()).ToList(); } public ObservableCollection<Item> AllItems { get { return _allItems; } set { _allItems = value; OnPropertyChanged(); } } public List<string> AlphabetList { get { return _alphabetList; } set { _alphabetList = value; OnPropertyChanged(); } } }
查看:
<RelativeLayout VerticalOptions="FillAndExpand"> <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AllItems}" SeparatorColor="Transparent" SeparatorVisibility="None" BackgroundColor="Transparent" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Property=Height,Factor=1}"> <RelativeLayout.WidthConstraint> <OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=RelativeToParent,Property=Width,Factor=0.9}" iOS="{ConstraintExpression Type=RelativeToParent,Factor=1}" WinPhone="{ConstraintExpression Type=RelativeToParent,Factor=1}" /> </RelativeLayout.WidthConstraint> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <StackLayout HorizontalOptions="FillAndExpand" BackgroundColor="Silver"> <Label Text="{Binding MyText}" /> <Button Text="button" /> <BoxView HeightRequest="1" Color="Gray" BackgroundColor="Gray" HorizontalOptions="FillAndExpand" /> </StackLayout> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> <ListView VerticalOptions="FillAndExpand" HasUnevenRows="True" ItemsSource="{Binding AlphabetList}" SeparatorColor="Transparent" SeparatorVisibility="None" BackgroundColor="Transparent" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent,Factor=0.9}" RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,Factor=0.05}" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent,Factor=0.9}"> <RelativeLayout.WidthConstraint> <OnPlatform x:TypeArguments="Constraint" Android="{ConstraintExpression Type=RelativeToParent,Factor=0.1}" iOS="{ConstraintExpression Type=RelativeToParent,Factor=0,Constant=0}" WinPhone="{ConstraintExpression Type=RelativeToParent,Constant=0}" /> </RelativeLayout.WidthConstraint> <ListView.IsVisible> <OnPlatform x:TypeArguments="x:Boolean" WinPhone="False" iOS="False" Android="True" /> </ListView.IsVisible> <ListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding .}" TextColor="Red" FontSize="Micro" /> </ViewCell> </DataTemplate> </ListView.ItemTemplate> </ListView> </RelativeLayout>
Android屏幕截图: