验证标签可见后，Scrollview + stacklayout 内容底部为空白
Posted
技术标签:
【中文标题】验证标签可见后，Scrollview + stacklayout 内容底部为空白【英文标题】：Scrollview + stacklayout bottom part of content blank after validation labels made visible 【发布时间】：2022-01-20 18:33:37 【问题描述】：正在开发一个应用程序，该应用程序从用户那里获取带有错误标签的输入以进行输入验证 错误标签可见性默认值为 false。 我有超过 10 个条目及其错误标签。
在应用接受输入并使用错误标签对其进行验证后，它会隐藏从屏幕中间到布局最后的所有内容。
这是我的 xaml 代码
<ContentPage.Content>
<ScrollView>
<StackLayout
Margin="20">
<!--Unit Type Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="xct:Translate UnitType"
Style="StaticResource PickerLabelStyle"/>
<Picker
Grid.Column="1"
ItemsSource="Binding UnitTypeList,Mode=OneWay"
SelectedIndex="Binding UnitTypeIndex,Mode=OneWayToSource"
Style="StaticResource PickerStyle"/>
</Grid>
<Label
Text="Binding UnitTypeError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding UnitTypeErrorVis,Mode=OneWay"
/>
<!--Unit IsFurnished Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="xct:Translate Furnished"
Style="StaticResource PickerLabelStyle"/>
<Picker
Grid.Column="1"
ItemsSource="Binding IsFurnishedList,Mode=OneWay"
SelectedIndex="Binding FurnishedIndex,Mode=OneWayToSource"
Style="StaticResource PickerStyle"/>
</Grid>
<Label
Text="Binding FurnishedError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding FurnishedErrorVis,Mode=OneWay"
/>
<!--Unit National ID-->
<Entry
Placeholder="xct:Translate UnitNationalID"
Text="Binding UnitNationalID"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding UnitNationalIDError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding UnitNationalIDErrorVis,Mode=OneWay"
/>
<!--Floor Num-->
<Entry
Placeholder="xct:Translate FloorNum"
Text="Binding FloorNum,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding FloorNumError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding FloorNumErrorVis,Mode=OneWay"
/>
<!--Unit Space-->
<Entry
Placeholder="xct:Translate UnitSpace"
Text="Binding UnitSpace,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding UnitSpaceError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding UnitSpaceErrorVis,Mode=OneWay"
/>
<!--Living Room Space-->
<Entry
Placeholder="Binding LivingRoomSpacePH,Mode=OneWay"
Text="Binding LivingRoomSpace,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<!--Rooms Num-->
<Entry
Placeholder="Binding RoomsNumPH,Mode=OneWay"
Text="Binding RoomsNum,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<!--Lights Num-->
<Entry
Placeholder="Binding LightsNumPH,Mode=OneWay"
Text="Binding LightsNum,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<!--Baths Num-->
<Entry
Placeholder="xct:Translate BathsNum"
Text="Binding BathsNum,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding BathsNumError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding BathsNumErrorVis,Mode=OneWay"
/>
<!--Maid Rooms Num-->
<Entry
Placeholder="xct:Translate MaidRoomsNum"
Text="Binding MaidRoomsNum,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding MaidRoomsNumError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding MaidRoomsNumErrorVis,Mode=OneWay"
/>
<!--Air Conditioner Type Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="xct:Translate AirCondType"
Style="StaticResource PickerLabelStyle"/>
<Picker
Grid.Column="1"
ItemsSource="Binding AirCondTypeList,Mode=OneWay"
SelectedIndex="Binding AirCondTypeIndex,Mode=OneWayToSource"
Style="StaticResource PickerStyle"/>
</Grid>
<Label
Text="Binding AirCondTypeError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding AirCondTypeErrorVis,Mode=OneWay"
/>
<!--Air Cond Power-->
<Entry
Placeholder="xct:Translate AirCondPower"
Text="Binding AirCondPower,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding AirCondPowerError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding AirCondPowerErrorVis,Mode=OneWay"
/>
<!--Rent-->
<Entry
Placeholder="xct:Translate Rent"
Text="Binding Rent,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding RentError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding RentErrorVis,Mode=OneWay"
/>
<!--Discount-->
<Entry
Placeholder="Binding DiscountPH,Mode=OneWay"
Text="Binding Discount,Mode=OneWayToSource"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<!--Unit Availability Picker-->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label
Grid.Column="0"
Text="xct:Translate UnitAvailability"
Style="StaticResource PickerLabelStyle"/>
<Picker
Grid.Column="1"
ItemsSource="Binding UnitAvailabilityList,Mode=OneWay"
SelectedIndex="Binding UnitAvailabilityIndex,Mode=OneWayToSource"
Style="StaticResource PickerStyle"/>
</Grid>
<Label
Text="Binding UnitAvailabilityError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding UnitAvailabilityErrorVis,Mode=OneWay"
/>
<!--Electricity Meter-->
<Entry
Placeholder="xct:Translate ElectricityMeterInfo"
Text="Binding ElecMeter"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding ElecMeterError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding ElecMeterErrorVis,Mode=OneWay"
/>
<!--Water Meter-->
<Entry
Placeholder="xct:Translate WaterMeterInfo"
Text="Binding WaterMeter"
Style="StaticResource EntryStyle"
Keyboard="Numeric"/>
<Label
Text="Binding WaterMeterError,Mode=OneWay"
Style="StaticResource ErrorLabel"
IsVisible="Binding WaterMeterErrorVis,Mode=OneWay"
/>
<!--Submit Button-->
<Button
Text="xct:Translate Submit"
Command="Binding SubmitCommand"
Style="StaticResource ButtonStyle"/>
</StackLayout>
</ScrollView>
</ContentPage.Content>
以及我为每个视图设置样式的静态资源
<!--Entry Style-->
<Style x:Key="EntryStyle" TargetType="Entry">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="FillAndExpand"/>
<Setter Property="PlaceholderColor" Value="Black"/>
<Setter Property="HorizontalTextAlignment" Value="Start"/>
</Style>
<!--Button Style-->
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
<Setter Property="Margin" Value="20"/>
<Setter Property="CornerRadius" Value="30"/>
<Setter Property="BackgroundColor" Value="Black"/>
<Setter Property="TextColor" Value="White"/>
<Setter Property="WidthRequest" Value="140"/>
</Style>
<!--Error Label-->
<Style x:Key="ErrorLabel" TargetType="Label">
<Setter Property="TextColor" Value="Red"/>
</Style>
<!--Picker Style-->
<Style x:Key="PickerStyle" TargetType="Picker">
<Setter Property="WidthRequest" Value="300"/>
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
</Style>
<!--Picker Label Style-->
<Style x:Key="PickerLabelStyle" TargetType="Label">
<Setter Property="VerticalOptions" Value="CenterAndExpand"/>
<Setter Property="HorizontalOptions" Value="CenterAndExpand"/>
<Setter Property="TextColor" Value="Black"/>
<Setter Property="FontSize" Value="Medium"/>
</Style>
注：截图取自安卓设备小米红米note 7
【问题讨论】：
1) android 模拟器上是否也会出现同样的问题？ 2) 屏幕上的空白位置是否与验证前的原始视图相同，距屏幕顶部的距离大致相同？ （我在想也许视图无法重新计算它的大小 - 但如果不是问题，不想继续修复它。） 3）与 2 相关，作为测试，请注释掉大多数验证代码，这样只显示第一项的验证。在这种情况下，是否有更多的项目保持可见？ 【参考方案1】：可能是this open bug。
this comment 的解决方法：
替换这个：
<ScrollView>
...
</ScrollView>
有了这个：
<Grid>
<ScrollView>
...
</ScrollView>
<Grid>
【讨论】：
谢谢你的回答对我很有帮助。以上是关于验证标签可见后，Scrollview + stacklayout 内容底部为空白的主要内容，如果未能解决你的问题，请参考以下文章
SwiftUI 水平 ScrollView 具有不可见的填充
如何使 Android ScrollView 褪色边缘始终可见？
SwiftUI - ScrollView 的宽度为 0，我的内容不可见
SwiftUI ScrollView：查找当前在屏幕中心可见的子视图。子视图在 ScrollView 中的位置。偏好键。滚动视图代理