Xamarin中ScrollView内的StackLayout

Question

我试图在一个ScrollView中水平居中一个StackLayout。 然而，这个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中不起作用。有什么想法吗？

- indubitablee

---

你可以在ScrollView中使用两个StackLayout。 - Akshay Kulkarni

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上的HorizontalOptions在这种情况下似乎没有任何影响，但我会使用FillAndExpand来说明填充ScrollView整个水平空间的意图。

- DavidS

Answer 2

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

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

使用 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>

- Keith Rome