滚动视图顶部的按钮不显示

Question

到目前为止，我有这样的观点：

   public StackLayout OffersSlideViewCarouselChild(Offer offer)
{
    Image productImage = new Image
    {
        Source = ImageSource.FromUri(new Uri(offer.Image.Replace("https://", "http://"))),
        HeightRequest = 270, 
        WidthRequest = 270,
        Aspect = Aspect.AspectFit
    };

    var topStackLayout = new StackLayout
    {
        Spacing = 0

    };
    topStackLayout.Children.Add(productImage);

    StackLayout contentStackLayout = new StackLayout
    {
        Spacing = 0,
        Padding = new Thickness(5, 10, 5, 10),
        Orientation = StackOrientation.Vertical
    };
    var savedBtn = SavedButtonLayout(offer.IsSelected, offer.Id);
    var redeemBtn = RedeemBtnLayout(offer.Id);
    var timeRemainingLabel = TimeRemainingLayout(offer, offer.Id);


    contentStackLayout.Children.Add(new UILabel(16) {
        Text = offer.ProductName,
        TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
        FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
        WidthRequest = DeviceDisplaySettings.defaultwidth,
        VerticalTextAlignment = TextAlignment.Center
});

    contentStackLayout.Children.Add(new UILabel(14)
    {
        Text = offer.Headline,
        TextColor = ColorHelper.FromHex(CoreTheme.COLOR_OFFERCELL_PRODUCT_TEXT),
        FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
        WidthRequest = DeviceDisplaySettings.defaultwidth,
        VerticalTextAlignment = TextAlignment.Center
    });

    contentStackLayout.Children.Add(new UILabel(14) {
        Text = offer.LongRewardsMessage,
        TextColor = ColorHelper.FromHex(CoreTheme.COLOR_DEAL_PAGE_LONG_REWARD_MESSAGE_RED),
        FontFamily = CoreTheme.FONT_FAMILY_DEFAULT_BOLD,
        WidthRequest = DeviceDisplaySettings.defaultwidth,
        VerticalTextAlignment = TextAlignment.Center
    });

    if (!string.IsNullOrEmpty(offer.PowerMessage)) {
        var htmlText = string.Format("<html><body style='color:#9b9b9b'>{0}</body></html>", offer.PowerMessage.Replace(@"\", string.Empty));

        var browser = new WebView() {
            //HeightRequest = (DeviceDisplaySettings.defaultheight > 600) ? 500 : 400,
            HeightRequest = 800,
            Source = new HtmlWebViewSource() { Html = htmlText },
        };
        browser.Navigating += OnNavigating;

        contentStackLayout.Children.Add(browser);
    }

    var nestedStackLayout = new StackLayout()
    {
        VerticalOptions = LayoutOptions.FillAndExpand
    };

    nestedStackLayout.Children.Add(topStackLayout);
    nestedStackLayout.Children.Add(timeRemainingLabel);
    nestedStackLayout.Children.Add(contentStackLayout);

    var mainScrollView = new ScrollView()
    {
        Padding = new Thickness(0, 0, 0, 10),
        VerticalOptions = LayoutOptions.FillAndExpand,
        Orientation = ScrollOrientation.Vertical,
        Content = nestedStackLayout
    };

    var mainStackLayout = new StackLayout()
    {
        Spacing = 5,
        Padding = new Thickness(0, 0, 0, 0),
        VerticalOptions = LayoutOptions.Fill,
        HorizontalOptions = LayoutOptions.Fill,
        Orientation = StackOrientation.Vertical,
        Children = { savedBtn, mainScrollView, redeemBtn }

    };

    return mainStackLayout;
}

private StackLayout SavedButtonLayout(bool isSelected, int offerid)
{
    int buttonsToShow = 2;
    bool displaySaveButton = true;

    if (IsPremisesOffer (offerid)) {
        buttonsToShow = 3;
        displaySaveButton = false;

    }

    btnShare = new UIFieldDefinition(_pageFieldDefinition.ShareButtonDefinition); 
    btnShare.Text = "SHARE";
    btnShare.ClassId = offerid.ToString();
    btnShare.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
    btnShare.BackgroundColor = Color.FromRgb(167, 188, 33);
    btnShare.VerticalContentAlignment = TextAlignment.Center;
    btnShare.HandleClick(btnShare_Clicked);


    btnSave = new UIFieldDefinition(_pageFieldDefinition.SaveButtonDefinition);
    btnSave.Text = isSelected ? "UNSAVE" : "SAVE";
    btnSave.ClassId = offerid.ToString();
    btnSave.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 40;
    btnSave.BackgroundColor = Color.FromRgb(167, 188, 33);
    btnSave.VerticalContentAlignment = TextAlignment.Center;
    btnSave.HandleClick(btnSave_Clicked);

    rl = new StackLayout {
        Spacing = 10,
        Orientation = StackOrientation.Horizontal,
        BackgroundColor = Color.FromRgb(196, 221, 57),
        Padding = new Thickness(40, 5, 5, 5),
        WidthRequest = DeviceDisplaySettings.defaultwidth
    };

    rl.Children.Add(btnShare);
    if (displaySaveButton) rl.Children.Add(btnSave);

    return rl;
}

public UIFieldDefinition RedeemBtnLayout(int offerid)
{
    int buttonsToShow = 1;

    btnRedeem = new UIFieldDefinition(_pageFieldDefinition.RedeemButtonDefinition);
    btnRedeem.Text = "REDEEM NOW";
    btnRedeem.ClassId = offerid.ToString();
    btnRedeem.WidthRequest = (DeviceDisplaySettings.defaultwidth / buttonsToShow) - 10;
//  btnRedeem.HorizontalOptions = LayoutOptions.FillAndExpand;
//  btnRedeem.VerticalOptions = LayoutOptions.EndAndExpand;
    btnRedeem.HandleClick(btnRedeem_Clicked);



    return btnRedeem;
}

但是，我注意到“兑换”按钮甚至没有显示在视图上（它应该固定在底部）。

滚动视图有效，但缺少按钮。为什么？

如果您需要更多代码详细信息，请告诉我。

Answer 1

您的布局很忙。一些事情：

将 VerticalOptions 设置为 EndAndExpand redeemBtn。
将 VerticalOptions 设置为 StartAndExpand savedBtn。
将 VerticalOptions 设置为 Fill mainScrollView。
将 VerticalOptions 设置为 FillAndExpand mainRelLayout。
将 VerticalOptions 和 HorizontalOptions 设置为 Fill mainStackLayout.

我认为这会让你到达你想去的地方。

包含 "Expand" 的选项将增大元素以适应其内容的所需高度。

Answer 2

如果您 "fixed" 通过更改 HeightRequest 来解决这个问题，那么您真正的问题是所有视图和布局的固定像素大小，我建议您不要为不同的屏幕分辨率使用固定像素大小，这会以后会是一个更大的问题，您可以做的是获取屏幕大小并进行数学运算以适合视图的所有元素，获取屏幕宽度和高度的一种方法是在 OnSizeChanged 事件上 Pages（类似于 ContentPage），像这样：

SizeChanged += SizeChanged;
void SizeChanged (object sender, EventArgs e)
{
    Layout.WidthRequest = Width * 0.3;
    Layout.HeightRequest = Height * 0.35;
}

Answer 3

从上面的评论移到这里。据我所知，有两个不同的问题，据我所知，它们是不相关的：

嵌套在 ScrollView 中的 WebView 不够大，无法完全显示内容。
本应位于屏幕底部的按钮未显示。

对于他们两个，答案可能在于您如何设置 HeightRequest。我和其他评论者提出了很多更改或删除某些 HeightRequest 设置的建议，我不确定您的源代码的当前状态。所以假设那些仍然存在：

解决WebView问题，阅读How can I add HTML to a Stacklayout inside a Scrollview in Xamarin forms?。这将使您找出要使用的正确 HeightRequest。简短的回答是，根据你想要发生的事情，你可能需要一个自定义渲染器。请注意，WebView 的 HeightRequest 不会影响 ScrollView 之外的任何布局。
为了解决按钮不显示的问题，去掉ScrollView上的HeightRequest设置，以及SavedButtonLayout中创建的StackLayout上的VerticalOptions设置。

我假设您做了上面建议的实验，以确保 redeemBtn 如果放在 ScrollView 之前会呈现，并且它确实会显示。如果没有，您首先需要修复它。

滚动视图顶部的按钮不显示

Button on top of the Scrollview does not show up

c#

android

scrollview

xamarin

xamarin.forms