我试图以一种“易于观察”的方式显示数据，但是很难正确地构造它。
我想按以下格式设置页面格式：1st Grid包含3个文本字段，一个在另一个下方，另一个在所有上方均带有适当的标题。第二个网格与其他三个字段相同，第三个网格包含7个文本字段，我想在第一列中显示-> 3，在第二列中显示2，在第二列中显示2，最后一个在相同标题下。
如果我将最后7个字段全部放在同一网格下，它们都将出现在同一列中。现在它几乎可以正常工作，但是只有3个第一个文本字段正确地位于标题下方，而其他4个出现在不同的边缘。
这是我的代码：（如果有人有改进显示的想法，我很乐意听到它的声音
<Grid container spacing={24}>
<Grid item sm={3}> // First grid - contains 3 text fields
<Typography variant="subheading" gutterBottom color="primary" >
{labels.brokerGeneralDetails}
</Typography>
<Grid item sm={10}>
<TextField
...
/>
</Grid>
<Grid item sm={2}>
<TextField
...
/>
</Grid>
<Grid item sm={2}>
<TextField
...
/>
</Grid>
</Grid>
<Grid item sm={1}> // Second grid - contains 3 text fields
<Typography variant="subheading" gutterBottom color="primary">
{labels.brokerAccountDetails}
</Typography>
<Grid item sm={6}>
<TextField
...
/>
</Grid>
<Grid item sm={3}>
<TextField
...
/>
</Grid>
<Grid item sm={2}>
<TextField
...
/>
</Grid>
</Grid>
<Grid item sm={3}> // Third grid - Should contain 7 text fields in 3 columns
<Typography variant="subheading" gutterBottom color="primary">
{labels.brokerOtherDetails}
</Typography>
<Grid >
<TextField
...
/>
</Grid>
<Grid item sm={2}>
<TextField
...
/>
</Grid>
<Grid item sm={1}>
<TextField
...
/>
</Grid>
</Grid>
<Grid item sm={1}> // Should be the second column
<Grid>
<TextField
...
/>
</Grid>
<Grid >
<TextField
...
/>
</Grid>
</Grid>
<Grid item sm={1}> // Should be the third column
<Grid>
<TextField
...
/>
</Grid>
<Grid>
<TextField
...
/>
</Grid>
</Grid>
</Grid>
我希望它显示如下：
Title3 Title2 Title1
Txt6 Txt4 Txt1 Txt1 Txt1
Txt7 Txt5 Txt2 Txt2 Txt2
Txt3 Txt3 Txt3
现在是：
Txt6 Txt4 Title3 Title2 Title1
Txt7 Txt5 Txt1 Txt1 Txt1
Txt2 Txt2 Txt2
Txt3 Txt3 Txt3
答案 0 :(得分：1)
我不确定这是否是基于所需内容构建网格的最佳方法，但我会这样做：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Column="2" Content="Title3" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="3" Content="Title2" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="4" Content="Title1" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="0" Grid.Row="1" Content="Txt6" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="1" Grid.Row="1" Content="Txt4" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="2" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="3" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="4" Grid.Row="1" Content="Txt1" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="0" Grid.Row="2" Content="Txt7" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="1" Grid.Row="2" Content="Txt5" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="2" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="3" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="4" Grid.Row="2" Content="Txt2" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="2" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="3" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
<Label Grid.Column="4" Grid.Row="3" Content="Txt3" HorizontalAlignment="Center" FontSize="36"/>
</Grid>
输出看起来像这样：https://gyazo.com/b6768ab550ddac6685549c35e38b34e9
如果要将标题居中于所有5列上方，也可以使用Grid.ColumnSpan跨越网格的多列。
答案 1 :(得分：1)
在网格中使用alignItems：alignItems="center"
<Grid container spacing={24} alignItems="center">
答案 2 :(得分：1)
花了一些时间后，我认为我做到了： 这是codeandbox：https://codesandbox.io/s/ll507vypy7
代码：
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="130dp"
android:height="130dp"
android:viewportWidth="130"
android:viewportHeight="130">
<path
android:pathData="M125,9L5,9a5,5 0,0 0,0 10L125,19a5,5 0,0 0,0 -10Z"
android:fillColor="#13293d"/>
<path
android:pathData="M125,42.84L5,42.84a5,5 0,0 0,0 10L125,52.84a5,5 0,0 0,0 -10Z"
android:fillColor="#13293d"/>
<path
android:pathData="M125,76.9L5,76.9a5,5 0,0 0,0 10L125,86.9a5,5 0,0 0,0 -10Z"
android:fillColor="#13293d"/>
<path
android:pathData="M125,111L5,111a5,5 0,0 0,0 10L125,121a5,5 0,0 0,0 -10Z"
android:fillColor="#13293d"/>
<path
android:pathData="M5,14.03a14,14.03 0,1 0,28 0a14,14.03 0,1 0,-28 0z"
android:fillColor="#13293d"/>
<path
android:pathData="M102,47.85a14,14.03 0,1 0,28 0a14,14.03 0,1 0,-28 0z"
android:fillColor="#13293d"/>
<path
android:pathData="M51,81.91a14,14.03 0,1 0,28 0a14,14.03 0,1 0,-28 0z"
android:fillColor="#13293d"/>
<path
android:pathData="M85,115.97a14,14.03 0,1 0,28 0a14,14.03 0,1 0,-28 0z"
android:fillColor="#13293d"/>
</vector>
PS是 MATERIAL-UI