ScrollView中的Xamarin Center StackLayout

2 回答

• 3

  您有几个选项，下面示例中的每个Label都应显示为居中 .

  关键是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的整个水平空间的意图 .

  回复于 2024-05-20T03:04:41+08:00
• 2

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

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

  使用网格：

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

  回复于 2024-05-20T03:04:41+08:00