英文:
Entrys in Rows of Grid default look really unnatural
问题
在.NET MAUI应用程序中，我想要创建一个类似表格的用户界面，其中包含第二列中的标签和输入框。
我在iOS上看到截图，我想知道为什么输入框默认会显得这么高？这对我来说看起来真的很糟糕。
是否有比设置输入框的HeightRequest更好的方式来使其看起来好看？即使设置VerticalAlignment="Center"也没有任何效果。
通常情况下，我不喜欢使用绝对数值，比如设置HeightRequest，但在这里，我不知道如何改进以使其看起来更自然。
所以，实际上，标签"Value A:"应该与输入框中的"0"垂直居中。因此，输入框需要上移或下移。
解决这类问题的首选方式是什么？
英文:
In a .NET MAUI App, I wanted to have a Table like UI with Label and Entrys in the second column.
<Grid RowDefinitions="Auto, Auto, Auto, Auto" ColumnDefinitions="150, *, *" Padding="15, 2, 0, 15" ColumnSpacing="10">
...
<Label Grid.Row="1" Grid.Column="0" Text="Value A:" Background="Red"/>
<StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center">
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" TextChanged="Entry_TextChanged" Focused="Entry_Focused"/>
<Label Text="g"/>
</StackLayout>
<Label Grid.Row="1" Grid.Column="2" Text="0 g" HorizontalOptions="Center" />
<Label Grid.Row="2" Grid.Column="0" Text="Value B:" Background="Blue"/>
<StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center">
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" TextChanged="Entry_TextChanged" Focused="Entry_Focused"/>
<Label Text="g"/>
</StackLayout>
<Label Grid.Row="2" Grid.Column="2" Text="0 g" HorizontalOptions="Center" />
...
</Grid>
I am asking myself why the Entrys get so high by default? The screenshot is from iOS. This really looks terrible to me.
Is there a better way to bring that in a good looking form than setting a HeightRequest for the Entrys? A VerticalAlignment="Center" even also does not have any effect.
Normally, I don't like to set something with absolute numbers like when setting a HeightRequest, but here, I don't know how this could be improved so that it looks naturally.
So, actually the Label "Value A:" should be vertically centered with the "0" of the Entry. Therefore the Entry needs to be move up or down.
What is the preferred way to solve such things?
答案1
得分: 0
在默认的网格行中，条目看起来非常不自然。
我为第三行的几个添加了VerticalOptions="Center"：
<Grid RowDefinitions="Auto, Auto, Auto" ColumnDefinitions="150, *, *" Padding="15, 2, 0, 15" ColumnSpacing="20">
<Label Grid.Row="1" Grid.Column="0" Text="Value A:" BackgroundColor="PaleVioletRed"/>
<StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center">
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" />
<Label Text="g"/>
</StackLayout>
<Label Grid.Row="1" Grid.Column="2" Text="0 g" HorizontalOptions="Center" />
<Label Grid.Row="2" Grid.Column="0" Text="Value B:" BackgroundColor="CornflowerBlue" VerticalOptions="Center"/>
<StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center" >
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" />
<Label Text="g" VerticalOptions="Center"/>
</StackLayout>
<Label Grid.Row="2" Grid.Column="2" Text="0 g" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
效果如下：
希望能对您有所帮助。
英文:
> Entrys in Rows of Grid default look really unnatural
I add VerticalOptions="Center" to several for third row:
<Grid RowDefinitions="Auto, Auto, Auto" ColumnDefinitions="150, *, *" Padding="15, 2, 0, 15" ColumnSpacing="20" >
<Label Grid.Row="1" Grid.Column="0" Text="Value A:" BackgroundColor="PaleVioletRed"/>
<StackLayout Grid.Row="1" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center">
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" />
<Label Text="g"/>
</StackLayout>
<Label Grid.Row="1" Grid.Column="2" Text="0 g" HorizontalOptions="Center" />
<Label Grid.Row="2" Grid.Column="0" Text="Value B:" BackgroundColor="CornflowerBlue" VerticalOptions="Center"/>
<StackLayout Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalOptions="Center" >
<Entry Text="0" Placeholder="0" HorizontalTextAlignment="Center" Keyboard="Numeric" />
<Label Text="g" VerticalOptions="Center"/>
</StackLayout>
<Label Grid.Row="2" Grid.Column="2" Text="0 g" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
Here is the effect:
Wish it can help you.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论