如何在Xamarin Forms中添加注册进度跟踪器？

Question

我正在尝试在Xamarin Forms的注册表单中添加进度跟踪器，但是不知何故我找不到有效的插件并卡在这里。我正在寻找的是这样的：

其中第1步，第2步，第3步和完成都具有不同的名称。

Answer 1

一种实现类似功能的选项是一个视图（我们将其称为public function products(){ return $this->hasMany('App\Product', 'id','product_id'); } ），其中包含一个StepBar来实现步骤。

最简单的选择是定义步骤的字符串列表，这些字符串将转换为StackLayout的内容（请记住，这是一个非常基本的示例，这为您提供了一个起点，但需要做一些工作才能准备好生产）

StackLayout

还有一个private ObservableCollection<string> _steps; public ObservableCollection<string> Steps { get { if (this._steps == null) { this._steps = new ObservableCollection<string>(); this._steps.CollectionChanged += this.OnStepsChanged; } return this._steps; } } 可绑定属性

SelectedStep

在您的public static readonly BindableProperty SelectedStepProperty = BindableProperty.Create(nameof(SelectedStep), typeof(int), typeof(StepBar), 0, propertyChanged: SelectedStepChanged); public int SelectedStep { get => (int)this.GetValue(SelectedStepProperty); set => this.SetValue(SelectedStepProperty, value); } 方法中，您将创建显示步骤的控件

OnStepChanged

private void OnStepsChanged(object sender, NotifyCollectionChangedEventArgs e) { this._stackLayout.Children.Clear(); foreach (var step in this._steps.Select((step, index) => new{StepName=step, Index=index})) { var selected = this._steps.IndexOf(step.StepName) <= this.SelectedStep; if (step.Index > 0) { this._stackLayout.Children.Add( new BoxView { BackgroundColor = selected ? Color.Aquamarine : Color.Black, HeightRequest = 1, HorizontalOptions = LayoutOptions.Fill, VerticalOptions = LayoutOptions.Center }); } var button = new Button { Text = step.StepName, HeightRequest = 80, WidthRequest = 80, CornerRadius = 40, BackgroundColor = selected ? Color.Aquamarine : Color.LightGray, }; button.Clicked += (_, __) => this.SelectedStep = step.Index; this._stackLayout.Children.Add(button); } } 在构造函数中初始化：

StackLayout

（我使用了新的Xamarin.Forms 3.6 public StepBar() { this.Visual = new VisualMarker.MaterialVisual(); this._stackLayout = new StackLayout { Spacing = 0, Margin = 20, Orientation = StackOrientation.Horizontal, HorizontalOptions = LayoutOptions.CenterAndExpand, VerticalOptions = LayoutOptions.Start }; this.Content = this._stackLayout; } 属性来使按钮变圆。这会给您旧版本Xamarin.Forms带来的错误。）

现在唯一要做的是，当Visual更改时，将步骤着色直到所选步骤。为此，我实现了SelectedStep处理程序

SelectedStepChanged

如果您不希望用户在步骤之间进行更改，则可以用简单的形状替换按钮。由于private static void SelectedStepChanged(BindableObject bindable, object oldvalue, object newvalue) { if (bindable is StepBar stepBar) { stepBar.OnSelectedStepChanged((int)newvalue); } } private void OnSelectedStepChanged(int selectedStep) { this.UncolorAll(); for (var step = 0; step <= selectedStep; step++) { this.ColorStep(step); } } private void UncolorAll() { foreach (var button in this._stackLayout.Children.OfType<Button>()) { button.BackgroundColor = Color.LightGray; } foreach (var boxView in this._stackLayout.Children.OfType<BoxView>()) { boxView.BackgroundColor = Color.Black; } } private void ColorStep(int step) { var button = this._stackLayout.Children.OfType<Button>().ElementAt(step); button.BackgroundColor = Color.Aquamarine; var boxViews = this._stackLayout.Children.OfType<BoxView>(); if (boxViews.Count() > step - 1 && step > 0) { var boxView = boxViews.ElementAt(step - 1); boxView.BackgroundColor = Color.Aquamarine; } } 是可绑定的，因此您可以轻松地将其绑定到视图模型。