Question

我正在开发一个xamarin.forms应用程序，这里如图所示我在标签字段和按钮之间获得了很宽的垂直间距，所以我需要减少它们并按正确的顺序对齐它们，这里是XAML代码所以请建议我需要做出哪些改变？

export default class HeaderComponent extends Component {
  render() {
    return (
      <Header>
        <Left>
          <Button
            transparent
            onPress={() => this.props.navigation.navigate('DrawerOpen')}
          >
            <Icon name='menu' />
          </Button>
        </Left>
        <Body>
          <Title>Roam</Title>
        </Body>
        <Right>
          <Button transparent
          onPress={() => this.props.navigation.navigate('Profile')}
          >
            <Icon name='person' />
          </Button>
        </Right>
      </Header>
    );
  }
}

要使按钮向上移动，我需要做出哪些更改？感谢

Answer 1

问题在于您对Grid.Row附加属性的使用。在第一个网格中，您定义了2行但是，然后，您将其某些子控件分配给属性Grid.Row为4,5和6.这会隐式强制创建其他行，并最终得到一个有7行的网格（因为当然行是基于0的）。当行没有给出明确的高度时，它们被赋予“*”，这意味着“等比例”，即所有相同的大小。仅此而已创造了大量额外空间。

此外，在第二个Grid中，带有按钮的Grid，只用一行定义它，但是为所有三个按钮分配Grid.Row = "1"，这样就强制创建第二行。同样，因为您没有指定高度，所以新创建的行与包含按钮的行的大小相同。

要解决所有这些问题，你必须：

将Grid.Row = "0"分配给第一个标签和第一个条目。
将Grid.Row="1"分配给第二个标签和第二个条目。
将Grid.Row="0"分配给所有三个按钮。

如果您希望标签显示在相对条目上，请将Grid.Row = "0"分配给第一个标签，Grid.Row = "1"分配给第一个条目，Grid.Row = "2"分配给第二个标签Grid.Row = "3" 1}}到第二个条目。此外，为清晰起见，请使用Height="Auto"或Height="*"在网格中定义四行。

为了使您的代码更简洁，请注意：

0是Grid.Row和Grid.Column的默认值，因此您可以摆脱此类任务;
如果Grid只有一行，则不必定义Grid.RowDefinitions属性。同样，如果您的Grid只有一列，则不必定义Grid.ColumnDefinitions属性。
使用“*”值表示高度或宽度时，使用十进制表示法没有用处。星号表示行（或列）之间的比例，因此例如，如果行是“2 *”而第二行是“*”，则第一行将是第二行的两倍。分配给行（或列）的星星总和可以是任意数字，因为它没有特定含义，重要的只是行（或列）之间的相对比例。为了更清楚地说明，在之前的例子中，你可以为第一行指定“100 *”，为第二行指定“50 *”：结果将是相同的。

xamarin.forms XAML代码，以最小化标签和按钮之间的距离

1 个答案: