我正在開發 iOS 和 Android 上的跨平臺應用程式。
現在我想在一個大網格中顯示一些搜索結果，每個單元格都可以點擊。每行應該有 3 個結果，并且同一行中的每個單元格都應該具有相同的高度和陰影框。每個結果可能有不同的高度。
這是一張展示我想要的圖片（就像 Excel 一樣）：
首先，我嘗試使用具有索引專案串列的 BindableLayout Grid。每個專案都有一個 Row 和一個 Col 屬性來填充到一個單元格中。但 Grid 的高度不同。這是xaml。
<ContentPage.BindingContext>
<mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
<Grid BindableLayout.ItemsSource="{Binding GridResult}" ColumnDefinitions="*,*,*" RowDefinitions="Auto" VerticalOptions="StartAndExpand">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="{Binding Row}" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</ScrollView>
</StackLayout>
</ContentPage.Content>
喜歡下面。emmmmm，不好（BindableLayout Grid）：
Then, I tried to use nested BindableLayout Grid(only one row) in a BindableLayout StackLayout. Every item in StackLayout is a list, every item in the list has a Col property to fill into a cell. Act a little better but not enough, for some short text will still hold large blank, and some has different height in a row.
<ContentPage.BindingContext>
<mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every Grid has one row and 3 columns.-->
<Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
It acts like this (a BindableLayout Grid in BindableLayout StackLayout):
So is there any way to adjust height of ever row of a grid to fit the content's height, with every cell in a row has the same height, the height is the max height of content(may be add some margin).
Added 1.======================
I tried the collection view. It not works well too. The Xamarin as follows.
<ContentPage.BindingContext>
<mvvm:GridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="StartAndExpand">
<CollectionView ItemsSource="{Binding GridResult}" VerticalOptions="StartAndExpand">
<CollectionView.ItemsLayout>
<GridItemsLayout Orientation="Vertical"
Span="3"
VerticalItemSpacing="5"
HorizontalItemSpacing="5" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<!-- Every cell is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" RowDefinitions="Auto" ColumnDefinitions="*" VerticalOptions="Start">
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="1">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="StartAndExpand" HorizontalTextAlignment="Center"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage.Content>
Here is the result. Emm, not well. CollectionView result
uj5u.com熱心網友回復：
正如我上面提到的，在隱藏框架中添加隱藏標簽可以解決這個問題。此外，我將 Button 的 HeightRequest 設定為一個小值（僅 1 行）并將 Margin 設定為固定值（僅 5）。
這是代碼。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:mvvm="clr-namespace:RecForYou.Mvvm"
x:Class="RecForYou.GridInGridPage">
<ContentPage.BindingContext>
<mvvm:GridInGridViewModel />
</ContentPage.BindingContext>
<ContentPage.Content>
<StackLayout Margin="5,50,5,0" >
<Label Text="Result:" />
<ScrollView x:Name="scrollViewResult" VerticalOptions="FillAndExpand">
<StackLayout BindableLayout.ItemsSource="{Binding GridResult}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every Grid has one row and 3 columns.-->
<Grid x:Name="ARowGrid" Margin="5,5,5,0" ColumnSpacing="5" RowSpacing="15" RowDefinitions="Auto" ColumnDefinitions="30*,30*,30*" BindableLayout.ItemsSource="{Binding Items}">
<BindableLayout.ItemTemplate>
<DataTemplate>
<!-- Every cell in ARowGrid is a nested Grid. Using grid is for the purpose of button.-->
<Grid x:Name="NestedGrid" Grid.Row="0" Grid.Column="{Binding Col}" RowDefinitions="Auto" ColumnDefinitions="*" >
<!-- Frame for the corner radius and shadow.-->
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0">
<!-- Label text is real display text.-->
<Label Text="{Binding Value}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center"/>
</Frame>
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="5" Margin="0" BackgroundColor="Transparent">
<!-- Label text is real display text.-->
<Label Text="{Binding HiddenValue}" Margin="-15" FontSize="Small" LineBreakMode="WordWrap" HorizontalOptions="Center" VerticalOptions="Start" HorizontalTextAlignment="Center" TextColor="Transparent"/>
</Frame>
<!-- Here placing a hole-cell button for a better click gesture. -->
<Button Grid.Row="0" Grid.Column="0" BackgroundColor="Transparent" Clicked="Button_Clicked" Margin="5" HeightRequest="10"/>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</Grid>
</DataTemplate>
</BindableLayout.ItemTemplate>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
而hole專案在github 上，結果如下。 結果
我不知道另一個框架和另一個標簽是否存在任何性能問題。有沒有更好的解決方案？
uj5u.com熱心網友回復：
我在我這邊做了一個測驗，我發現內部網格的 RowDefinitions 是自動的，如果你將它設定為“*”，單元格將具有相同的高度。正如微軟檔案所說的關于網格長度：
GridLength 結構根據 GridUnitType 列舉指定行高或列寬，該列舉具有三個成員：
自動 – 根據單元格內容自動調整行高或列寬（XAML 中的自動）。
星號 – 剩余的行高或列寬按比例分配（XAML 中后跟 * 的數字）。
絕對 – 行高或列寬是與設備無關的單位（XAML 中的數字）中的值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410777.html
標籤：