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

Answer 2

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

但是，您可以使用网格实现所需的布局，也可以使用其他布局模型。

使用网格：

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

ScrollView中的Xamarin Center StackLayout

2 个答案: