英文:
How do I make a full screen grid in .net Maui?
问题
我试图创建一个页面，顶部有一行工具栏，中间是主要内容，然后屏幕底部有一个状态栏。如果主要内容太大，我希望它可以滚动。应该很容易，对吧？
以下是我一直在使用的XAML，但似乎无法使其正常工作。更准确地说，我无法在iOS上使其正常工作。在Android上它可以正常工作，但在iOS上它会扩展到屏幕底部，所以我看不到它。
有什么建议吗？
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>
<Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Row="1" Color="Teal" />
<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
<StackLayout>
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<!-- 这里是其他标签的重复部分，已经截取 -->
</StackLayout>
</ScrollView>
<BoxView Grid.Row="2" Color="Red" />
<Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
希望这可以帮助你解决问题。
英文:
I am trying to make a page which has a top row (toolbar), main content in the middle, then a status bar along the bottom of the screen. If the main content is too large then I want it to scroll. Should be easy - right?
Below is the XAML I have been using but just can't seem to get it to work. More accurately - I can't get it to work on iOS. It works fine on Android but in iOS it just expands off the bottom of the screen so I can't see it.
Any suggestions?
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Grid.Row="0" Color="Green"/>
<Label Text="Row 0, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Row="1" Color="Teal" />
<ScrollView Grid.Row="1" VerticalOptions="FillAndExpand">
<StackLayout>
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
<Label Text="Row 1, Column 0" HorizontalOptions="Center" VerticalOptions="Center" />
</StackLayout>
</ScrollView>
<BoxView Grid.Row="2" Color="Red" />
<Label Grid.Row="2" Text="Row 2, Columns 0 and 1" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
答案1
得分: 0
Ewerspej的评论链接到已知问题。
在这个问题得到修复之前，可以使用一个解决方法，即在网格行上设置一个数值高度。
您将需要手动减去其他内容的高度。在您的情况下，从屏幕高度中减去200：
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="{Binding ScrollViewRowHeight, Source={RelativeSource Self}}"/>
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
代码后台（code-behind）：
public double ScrollViewRowHeight { get; set; }
...
// 构造函数
public MyPageNameHere()
{
InitializeComponent();
var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
ScrollViewRowHeight = screenHeight - 200;
...
}
英文:
Ewerspej's comment on question links to the known issue.
Until this is fixed, a work-around is to set a numeric height on the grid row.
You'll have to manually subtract the heights of other content. In your case, subtract 200 from the screen height:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="{Binding ScrollViewRowHeight, Source={RelativeSource Self}" />
<RowDefinition Height="100"/>
</Grid.RowDefinitions>
code-behind:
public double ScrollViewRowHeight { get; set; }
...
// constructor
public MyPageNameHere()
{
InitializeComponent();
var screenHeight = Microsoft.Maui.Devices.DeviceDisplay.MainDisplayInfo.Height;
ScrollViewRowHeight = screenHeight - 200;
...
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论