我在網格比例行中使用串列視圖,它的其他元素在自動行中。因為我希望我的串列視圖占據螢屏的其余部分。到目前為止一切正常。
但是,當我想在外面使用滾動視圖時,串列視圖會占據整個螢屏,而其他元素不可見。
我希望串列視圖在滾動視圖中顯示相同。在這里我必須使用滾動視圖,因為我在網格中動態添加更多元素(標簽、按鈕等)。過了一會兒,當串列視圖的高度到達末尾時,滾動視圖應該開始了。我嘗試了一切但失敗了
非常感謝迄今為止提供幫助的人。
示例代碼
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiApp4.MainPage">
<ScrollView VerticalOptions="Fill">
<Grid HorizontalOptions="Fill" VerticalOptions="Fill">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label Grid.Row="1"
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<ListView x:Name="listView"
Grid.Row="2"
VerticalOptions="Fill"
ItemsSource="{Binding Monkeys}"
MinimumHeightRequest="200">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.ContextActions>
<MenuItem Text="Favorite"
IconImageSource="favorite.png"
Command="{Binding Source={x:Reference listView}, Path=BindingContext.FavoriteCommand}"
CommandParameter="{Binding}" />
<MenuItem Text="Delete"
IconImageSource="delete.png"
Command="{Binding Source={x:Reference listView}, Path=BindingContext.DeleteCommand}"
CommandParameter="{Binding}" />
</ViewCell.ContextActions>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Label Grid.Row="3"
Text="Welcome to .NET Multi-platform App UI"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
HorizontalOptions="Center" />
<Button Grid.Row="4"
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
</Grid>
</ScrollView>
</ContentPage>
uj5u.com熱心網友回復:
您希望“串列視圖占據螢屏的其余部分”,同時,您將此網格包裝在 ScrollView 中,從而消除了限制。
不要將您的 Vertical ListView 包裝在 Vertical ScrollView 中。或者,如果你這樣做,請確保 ListView 的高度是有限的。
否則,您將在完全展開的 ListView 上滾動。
uj5u.com熱心網友回復:
您可以將串列視圖所在的行設定為絕對高度。
這是代碼:
<ScrollView>
<Grid RowDefinitions="auto,auto,200,auto,auto,auto,auto">
<Image Grid.Row="0"
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label Grid.Row="1"
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
<ListView Grid.Row="2">
<ListView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
<x:String>sss</x:String>
</x:Array>
</ListView.ItemsSource>
</ListView>
<Label Grid.Row="3"
Text="Welcome to .NET Multi-platform App UI"
SemanticProperties.HeadingLevel="Level2"
SemanticProperties.Description="Welcome to dot net Multi platform App U I"
FontSize="18"
HorizontalOptions="Center" />
<Button Grid.Row="4"
x:Name="CounterBtn"
Text="Click me"
SemanticProperties.Hint="Counts the number of times you click"
Clicked="OnCounterClicked"
HorizontalOptions="Center" />
<Image Grid.Row="5"
Source="dotnet_bot.png"
SemanticProperties.Description="Cute dot net bot waving hi to you!"
HeightRequest="200"
HorizontalOptions="Center" />
<Label Grid.Row="6"
Text="Hello, World!"
SemanticProperties.HeadingLevel="Level1"
FontSize="32"
HorizontalOptions="Center" />
</Grid>
</ScrollView>
uj5u.com熱心網友回復:
您的 ScrollView 處于錯誤的級別,并且不應將 ListView 嵌套在 ScrollView 內,因此最好完全省略 ScrollView,因為 ListView 自己提供滾動功能:
<Grid RowDefinitons="auto, auto, *, auto, auto">
<!-- leaving out irrelevant bits -->
<ListView Grid.Row="2">
<!-- leaving out irrelevant bits -->
</ListView>
<Label />
<Button />
</Grid>
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/scrollview
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/527632.html
