Scrollview 顶部的按钮不显示答案

【问题标题】：Button on top of the Scrollview does not show upScrollview 顶部的按钮不显示
【发布时间】：2016-07-27 13:29:01
【问题描述】：

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

   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;
}

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

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

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

【问题讨论】：

您是否尝试过不同的屏幕分辨率或设备？使用更大的设备是否会切断它，如果是，那么您最好检查您的宽度高度请求属性，填充和间距也很重要！
@MarioGalván，是的，它被切断了。哪些属性准确（名称明智），我应该检查堆栈布局还是特定元素？
所有元素、布局和视图，还要检查使用 FillAndExpand 可能会干扰的 VerticalOptions，Xamarin 建议保持 Vertical 和 Horizontal Options 不变（默认）。
@MarioGalván，这并没有解决任何问题。我删除了所有 VerticalOptions 和 Horizontal Options。没有什么不同。
如何更改填充、间距以及宽度和高度请求？

标签： c# android xamarin scrollview xamarin.forms

【解决方案1】：

您的布局很忙。几件事：

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

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

包含“展开”的选项将扩大元素以适应其内容所需的高度。

【讨论】：

VerticalOptions forredeemBtn 和 savedBtn... 用于按钮本身还是用于 StackLayout？
无论如何，您建议的更改仍然无法完全滚动...感谢您的帮助！

【解决方案2】：

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

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

【讨论】：

如果文本发生变化，我可以用它来调整按钮的大小吗？
文本是指标签或条目中的文本？
我的意思是像一个按钮。如果文本内的文本改变长度，则调整按钮大小。
嗯，有一个Label 对象，您可以设置Text 属性，还有一个Entry 对象，您还可以设置Text 属性（这仅用于上下文） Entry 对象有一个名为 TextChanged 的侦听器，您可以使用它来更改调整大小帐户，例如：`Entry t = new Entry (); t.TextChanged += OnTextChanged; void OnTextChanged(object sender, EventArgs e){//Do stuff}`
如果它是一个标签，最好的办法是将 Text 属性绑定到视图模型中的可绑定字符串属性，当此文本更改时，您可以更改调整按钮的大小，但您必须绑定您的视图模型的按钮的 HeightProperty 也是。

【解决方案3】：

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

嵌套在 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 之前，它会呈现，并且它确实会显示出来。如果没有，您首先需要修复它。

【讨论】：

两件事 1) 我摆脱了 ScrollView 上的 HeightRequest 2) 我摆脱了 SavedButtonLayout 上的 VeritcalOptions。我需要摆脱 ScrollView 嵌套在 mainStackLayout 上的任何东西吗？我需要摆脱 mainScrollView 上的 VerticalOptions 吗？谢谢！由于我添加了更长的高度请求，因此我不再有内容不再出现在 webview 中的问题。但是，现在唯一的问题是按钮没有显示（但如果我将它作为 SavedButtonLayout 的一部分，它确实会显示）。
在我的帖子中更新了我的代码。有空的时候看看。再次感谢您的帮助！