如何在 StackLayout 中放置 3 个按钮等宽

Answer 1

仍然使用网格，只需以百分比指定列的宽度（为好玩而设置的列间距）：

    <Grid 
     ColumnDefinitions="33.33*, 33.33*, 33.33*"
     ColumnSpacing="8" 
     HorizontalOptions="FillAndExpand">
        <Button Text="1" Grid.Column="0" HorizontalOptions="FillAndExpand"/>
        <Button Text="2" Grid.Column="1" HorizontalOptions="FillAndExpand"/>
        <Button Text="3" Grid.Column="2" HorizontalOptions="FillAndExpand"/>          
     </Grid>

更新：在 Xamarin.Forms 4.8 中使用单行 ColumnDefinitions 属性

Answer 2

相对布局：

<RelativeLayout HorizontalOptions="FillAndExpand">
    <Button Text="Button 1" RelativeLayout.XConstraint="{ConstraintExpression 
            Type=RelativeToParent,Property=Width,Factor=.0000,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
    <Button Text="Button 222" RelativeLayout.XConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.3333,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
    <Button Text="Button 333333" RelativeLayout.XConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.6666,Constant=0}"
            RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Width,Factor=.3333,Constant=0}"/>
</RelativeLayout>

堆栈布局：

<StackLayout Orientation="Horizontal">
    <Button x:Name="button1" Text="Button 1"/>
    <Button Text="Button 222" WidthRequest="{Binding Path=Width, Source={x:Reference button1}}"/>
    <Button Text="Button 333333" WidthRequest="{Binding Path=Width, Source={x:Reference button1}}"/>
</StackLayout>

Answer 3

<StackLayout VerticalOptions="EndAndExpand" Orientation="Horizontal" Spacing="2" Padding="2">
            <Button Text="Move Up" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Down" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Right" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
            <Button Text="Move Left" HorizontalOptions="FillAndExpand" BackgroundColor="AntiqueWhite" TextColor="Black" />
</StackLayout>

似乎是一个旧线程，但对于任何可能想要使用

StackLayout

实现的人来说，这将准确地将按钮在水平方向上以相等的间距放置。

Answer 4

Flexlayout 为此提供了一个简单的解决方案，将其 Direction 属性设置为“Row”，将 JustifyContent 属性设置为“SpaceEvenly”。 请找到下面的代码：

<FlexLayout Direction="Row" AlignItems="Center" 
JustifyContent="SpaceEvenly" HeightRequest="50">
    <Button Text="Button 1" BackgroundColor="Red"/>
    <Button Text="Button 2" BackgroundColor="Green"/>
    <Button Text="Button 3" BackgroundColor="Aquamarine"/>
</FlexLayout>