Xamarin形式的梯度stacklayout

2 回答

• 0

  要在重绘时避免上述解决方案中的null异常，您需要确保检查Sublayers属性是否为null，如下所示：

  if (Layer.Sublayers?[0] is CAGradientLayer)
  {
      Layer.ReplaceSublayer(Layer.Sublayers[0], gradientLayer);
  }
  else
  {
      Layer.InsertSublayer(gradientLayer, 0);
  }
  

  回复于 2024-04-29T07:27:48+08:00
• 2

  这是解决方案 . 当堆栈布局的大小改变时，我们需要强制重绘 .

  [assembly: ExportRenderer(typeof(GradientStack), typeof(GradientStackRenderer))]
  
  namespace yournamespace.iOS
  {
      class GradientStackRenderer : ViewRenderer<StackLayout, UIView>
      {
  
          public override void Draw(CGRect rect)
          {
              base.Draw(rect);
              CAGradientLayer layer = new CAGradientLayer();
              layer.Frame = rect;
              layer.Colors = new CGColor[]
              {
                  ((GradientStack)Element).StartColor.ToCGColor(),
                  ((GradientStack)Element).EndColor.ToCGColor()
              };
  
              if(Layer.Sublayers[0] is CAGradientLayer)
                  Layer.ReplaceSublayer(Layer.Sublayers[0], layer);
              else
                  Layer.InsertSublayer(layer, 0);
  
          }
  
          protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
          {
              base.OnElementPropertyChanged(sender, e);
  
              if(e.PropertyName=="Width")
                  SetNeedsDisplay();
          }
  
  
      }
  }
  

  我们也不想在每次绘制时添加图层，因此如果已经在子图层中，我们检查并替换我们的图层 .

  我也会删除不必要的大小请求

  <AbsoluteLayout>
          <Image Source="img_bg.png" Aspect="AspectFill" VerticalOptions="FillAndExpand" AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All"/>
          <StackLayout  AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" Spacing="0" Padding="0,20,0,0">
              <Image Source="img_bg.png" HorizontalOptions="Center" WidthRequest="200" HeightRequest="80"/>
              <ScrollView>
                  <local:GradientStack StartColor="#99ddde" EndColor="#2896b1" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Padding="25,5,25,20" Margin="20,25,20,0" Spacing="0">
                      <Label Text="Log in" HorizontalOptions="Start" TextColor="#e5f8fc" FontSize="34"/>
                      <Label Text="Username" HorizontalOptions="Start" TextColor="#e5f8fc" FontSize="20" Margin="0,10,0,0"/>
                      <local:CustomBorderEntry x:Name="txtUserName" HorizontalOptions="FillAndExpand"
                             HeightRequest="38" Margin="0,5,0,0"
                             BackgroundColor="#e5f8fc" FontSize="16"
                             TextColor ="#201f1f"
                             HorizontalTextAlignment="Start" />
                      <Label Text="Password" HorizontalOptions="Start" TextColor="#e5f8fc" FontSize="20" Margin="0,10,0,0"/>
                      <local:CustomBorderEntry x:Name="txtPassword" HorizontalOptions="FillAndExpand"
                             HeightRequest="38" Margin="0,5,0,0"
                             BackgroundColor="#e5f8fc" FontSize="16"
                             TextColor ="#201f1f"
                             HorizontalTextAlignment="Start" IsPassword="true"/>
                      <Label Text="Event Code" HorizontalOptions="Start" TextColor="#e5f8fc" FontSize="20" Margin="0,10,0,0"/>
                      <local:CustomBorderEntry x:Name="txtEventCode" HorizontalOptions="FillAndExpand"
                             HeightRequest="36" Margin="0,5,0,0"
                             BackgroundColor="#e5f8fc" FontSize="16"
                             TextColor ="#201f1f"
                             HorizontalTextAlignment="Start"/>
                      <StackLayout Margin="0,20,0,0" Padding="0,1,0,0" BackgroundColor="#e5f8fc" HorizontalOptions="FillAndExpand" HeightRequest="45">
                          <local:GradientStack StartColor="#2c7f9d" EndColor="#0e5a8c" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" x:Name="slLogin">
                              <Label Text="Log in" FontSize="20" TextColor="#e5f8fc" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                          </local:GradientStack>
                      </StackLayout>
                  </local:GradientStack>
              </ScrollView>
          </StackLayout>
      </AbsoluteLayout>
  

  回复于 2024-04-29T07:27:48+08:00