Xamarin 表单：带有键盘的 ScrollView答案

【问题标题】：Xamarin Forms: ScrollView with KeyBoardXamarin 表单：带有键盘的 ScrollView
【发布时间】：2018-05-21 11:33:30
【问题描述】：

我使用的是最新版本的 Xamarin Forms。我有一个内容页面。内容页面有一个网格，该网格具有一个滚动视图，该滚动视图具有一个包含一些图像和条目输入以及一些按钮的堆栈布局。当我触摸 Entry 以输入文本时，键盘会覆盖按钮，因此我无法按下按钮。这是不可滚动的，我不知道为什么。任何人都可以帮助我吗？

这是我的 XAML 代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Spirocco.LoginPage">
<Grid>
    <ScrollView Orientation="Both" x:Name="scrollView">
        <ScrollView.Content>
            <StackLayout BackgroundColor="#302138">
                <Image Source="login_logo" Margin="0,0,0,0"></Image>
                <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                    <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                    <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                    <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                    <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                    <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
                </StackLayout>
            </StackLayout>
        </ScrollView.Content>
    </ScrollView>
</Grid>

Here is the solution

【问题讨论】：

你想要什么是可滚动的？现在，网格中的所有内容都是您要滚动的内容。里面的元素可以相互重叠而不滚动，因为只有整组元素是。
我希望所有页面都可以滚动。当我尝试输入密码时，我无法触摸登录按钮，因为键盘覆盖了它。我想向下滚动所有内容并能够触摸登录按钮。对不起，我的英语不太好。
我认为你只需要将<Grid>...</Grid> 替换为<ContentPage.Content>...</ContentPage.Content>。无论视口大小如何，网格都可以尽可能大。但是，当 direct 子项是 ScrollView 时，ContentPage 确实知道要做什么。我无法对此进行测试，因此我不会将其发布为答案。

标签： c# xamarin scrollview

【解决方案1】：

默认情况下，网格的行高值将等于“*”，因此会占用屏幕中的所有空间。这就是它不可滚动的原因。

顺便说一句，我真的不明白你为什么要嵌套在网格中。

试试这个：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Class="Spirocco.LoginPage">

<ScrollView Orientation="Both" x:Name="scrollView">
    <ScrollView.Content>
        <StackLayout BackgroundColor="#302138">
            <Image Source="login_logo" Margin="0,0,0,0"></Image>
            <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
            </StackLayout>
        </StackLayout>
    </ScrollView.Content>
</ScrollView>

【讨论】：

ScrollView 需要一个父级。或者我得到了 Sequent Contains No Matching Element 错误。

【解决方案2】：

The Solution is Here

它不能滚动，因为在 stacklayout 中没有足够的内容。我能够做到这一点。这不是一个很好的解决方案，但有效。我将标签宽度 HeighRequest 和颜色与 StackLayout 相同，现在当我输入密码时页面是可滚动的。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="Spirocco.LoginPage">
<ContentPage.Content>
    <ScrollView Orientation="Both" x:Name="scrollView">
        <ScrollView.Content>
            <StackLayout BackgroundColor="#302138">
                <Image Source="login_logo" Margin="0,0,0,0"></Image>
                <StackLayout BackgroundColor="White" Margin="20,0,20,30">
                    <Label Text="ÜDVÖZÖLJÜK!" FontSize="30" FontFamily="Comic Sans MS" Margin="0,15,0,0" TextColor="#302138" HorizontalTextAlignment="Center"></Label>
                    <Entry Text="{Binding Email}" Placeholder="E-mail" Margin="40,0,40,0" Keyboard="Email"/>
                    <Entry Text="{Binding Password}" Placeholder="Jelszó" IsPassword="True" Margin="40,0,40,0"/>
                    <Button Text="BEJELENTKEZÉS" Clicked="Login" TextColor="White" BackgroundColor="#302138" Margin="40,10,40,0"/>
                    <Button Text="REGISZTRÁCIÓ" Clicked="Register" TextColor="White" BackgroundColor="#302138" Margin="40,0,40,25"/>
                </StackLayout>
                <Label BackgroundColor="#302138" HeightRequest="160"/>
            </StackLayout>
        </ScrollView.Content>
    </ScrollView>
</ContentPage.Content>

【讨论】：

谁有更好的解决方案？

【解决方案3】：

只需将此代码添加到 App.xaml.cs 即可使页面自动调整大小

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

public partial class App : Xamarin.Forms.Application
{
    public App ()
    {
        Xamarin.Forms.Application.Current.On<Xamarin.Forms.PlatformConfiguration.Android>().UseWindowSoftInputModeAdjust(WindowSoftInputModeAdjust.Resize);
        InitializeComponent();

        MainPage = new NavigationPage(new LoginTabsPage()){
        ...

【讨论】：

像魅力一样工作。