ScrollView 中的 Xamarin Center StackLayout

Question

我正在尝试将StackLayout 水平居中在ScrollView 内。但是，StackLayout 不是水平居中的（它是左对齐的）。我尝试将 ScrollView 居中，但整个视图不可滚动 - 只有中心部分是。

<ScrollView BackgroundColor="Teal">
  <StackLayout Spacing="5"
               Padding="30"
               WidthRequest="400"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               BackgroundColor="Transparent">
       <Label Text="Test"/>
       <Label Text="Test"/>
       <Label Text="Test"/>
       <Label Text="Test"/>
  </StackLayout>
</ScrollView>

居中适用于 2 个嵌套的 StackLayout 元素，但不适用于 ScrollView。有什么想法吗？

Answer 1

您有几个选项，下面示例中的每个标签都应该居中显示。

关键是 StackLayout 的布局基于其内容。您可能会认为您可以按照您的方式将整个 StackLayout 居中，但至少作为 ScrollView 的内容，它不会那样工作。但是将 StackLayout 的子元素居中将在 ScrollView 中居中：

<ScrollView BackgroundColor="Teal">
  <StackLayout Spacing="5"
               Padding="30"
               WidthRequest="400"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand"
               BackgroundColor="Transparent">
       <Label Text="Test" HorizontalOptions="Center"/>
       <StackLayout HorizontalOptions="Center">
           <Label Text="Test"/>
       </StackLayout>
  </StackLayout>
</ScrollView>

外部 StackLayout 上的 Horizo​​ntalOptions 在这种情况下似乎没有任何影响，但我会使用 FillAndExpand 来记录填充 ScrollView 整个水平空间的意图。

Answer 2

StackLayout 的工作方式是填充一个轴，同时为所有子元素分割另一轴上的可用空间。它不会在“填充”轴（本例中为水平轴）上自动调整大小，因此在该轴上居中元素不会产生任何结果。

但是，您可以使用 Grid 并可能使用其他布局模型来实现所需的布局。

使用网格：

<ScrollView BackgroundColor="Teal">
    <Grid HorizontalOptions="Fill" VerticalOptions="FillAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Label Grid.Column="1" Grid.Row="0" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="1" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="2" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="3" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="4" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="5" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="6" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="7" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="8" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="9" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="10" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="11" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="12" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="13" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="14" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="15" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="16" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="17" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="18" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="19" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="20" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="21" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="22" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="23" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="24" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="25" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="26" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="27" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="28" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="29" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="30" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="31" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="32" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="33" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="34" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="35" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="36" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="37" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="38" Text="Test"/>
        <Label Grid.Column="1" Grid.Row="39" Text="Test"/>
    </Grid>
</ScrollView>