Xamarin.Forms 如何使按钮出现在一行中

Posted

技术标签:

【中文标题】Xamarin.Forms 如何使按钮出现在一行中【英文标题】:Xamarin.Forms How to make the Buttons appear in one line 【发布时间】:2021-11-13 22:23:58 【问题描述】:

如何让按钮出现在一行中


这是我的代码

namespace RowCounter.Forms

    public partial class MainPage : ContentPage
    
        public int Number = 1;

        public MainPage()
        
            InitializeComponent();
        
        public object Children  get; private set; 
        void OnButtonClicked(object sender, EventArgs e)
        
            Button button = new Button
            
                Text = "NAME PRODJECT"+"  "+ Number,
                TextColor= Color.Red,
                WidthRequest =450,
                HorizontalOptions = LayoutOptions.Start
            ;
            Button button2 = new Button
            
                Text = "X",
                WidthRequest = 40,
                HorizontalOptions = LayoutOptions.End
            ;
            MainStackLayout.Children.Add(button2);
            MainStackLayout.Children.Add(button);            
            Number++;
                       
    

和我的 xaml 代码

<StackLayout x:Name ="MainStackLayout" BackgroundColor="#9370db">
    <Button Text="СОЗДАТЬ ПРОЕКТ"    
            FontAttributes="Bold"
            FontSize="25"
            WidthRequest="250"
            HeightRequest="80"
            Clicked="OnButtonClicked"
            TextColor="#ff000000"
            BackgroundColor="#4b0082"/>
</StackLayout> 

请帮帮我

【问题讨论】:

【参考方案1】:

使用 Grid 而不是 Stacklayout。

来自文档:

Grid

Grid 是一种将其子元素组织成行和 列,可以具有比例或绝对大小。默认情况下,一个 网格包含一行和一列。此外,还可以使用 Grid 作为包含其他子布局的父布局。

Stacklayout

StackLayout 在一维堆栈中组织子视图

例如,您的代码如下所示

<Grid x:Name="MainGrid" VerticalOptions="StartAndExpand">
      <Grid.RowDefinitions>

      </Grid.RowDefinitions>
      <Button Grid.Column="0"
              Grid.ColumnSpan="2"
              Grid.Row="0"
              Text="СОЗДАТЬ ПРОЕКТ"
              FontAttributes="Bold"
              FontSize="25"
              WidthRequest="250"
              HeightRequest="80"
              Clicked="OnButtonClicked"
              TextColor="#ff000000"
              BackgroundColor="#4b0082"/>
</Grid>

以及背后的代码

public int Number = 1;

public ButtonsPage()

    InitializeComponent();


public object Children  get; private set; 
void OnButtonClicked(object sender, EventArgs e)

    Button button = new Button
    
        Text = "NAME PRODJECT" + "  " + Number,
        TextColor = Color.Red,
        WidthRequest = 450,
        HeightRequest = 40,
        HorizontalOptions = LayoutOptions.Start
    ;
    Button button2 = new Button
    
        Text = "X",
        WidthRequest = 40,
        HeightRequest = 40,
        HorizontalOptions = LayoutOptions.End
    ;
    MainGrid.Children.Add(button, left: 0, top: Number);
    MainGrid.Children.Add(button2, left: 1, top: Number);
    Number++;

产生类似的东西


第二个选项,虽然不推荐是嵌套Stacklayouts:Stacklayout >Stacklayouts 由两个按钮组成,方向设置为水平。这是不好的做法,不利于性能,如Jason Smith said in his famous talk at Evolve 2016.

【讨论】:

【参考方案2】:

使用网格。

一个小例子。

 <Grid
    Padding="20"
    ColumnDefinitions="Auto, Auto,Auto"
    RowDefinitions="Auto,Auto">

    <Button
        Grid.Row="1"
        Grid.Column="0"
        BackgroundColor="#4b0082"
        Clicked="Button_Clicked_1"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="40"
        Text="NAME PRODJECT 1"
        TextColor="White"
        WidthRequest="200" />

    <Button
        Grid.Row="1"
        Grid.Column="3"
        BackgroundColor="#4b0082"
        Clicked="Button_Clicked"
        FontAttributes="Bold"
        FontSize="16"
        HeightRequest="40"
        HorizontalOptions="End"
        Text="X"
        TextColor="White"
        WidthRequest="40" />

</Grid>

【讨论】:

【参考方案3】:

如果您有多个按钮,网格就可以了。如果按钮数量超过5个,手机APP中的按钮可能会因为手机尺寸的限制而过度播放。

可选的是使用 FlexLayout(参见:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.flexlayout?view=xamarin-forms)。您可以水平布局按钮,如果空间不够,可以自动分成多行。

例子:

FlexLayout flex = new FlexLayout();
flex.HorizontalOptions = LayoutOptions.Fill;
flex.VerticalOptions = LayoutOptions.StartAndExpand;
flex.Direction = FlexDirection.Row;
flex.Wrap = FlexWrap.Wrap;
//Add buttons
flex.Children.Add(button1);
flex.Children.Add(button2);
        ...

【讨论】:

【参考方案4】:

Stacklayout 可以是水平的(方向参数),但为了提高效率,我会使用网格或表格布局。

【讨论】:

以上是关于Xamarin.Forms 如何使按钮出现在一行中的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Xamarin Forms 中按顺序显示(出现)元素

如何在 Xamarin.Forms 中使用 Tap Gesture 调用另一个页面?

Xamarin UWP - 如何摆脱悬停在按钮上时出现的边框

如何在 Xamarin.Forms 的 TabbedPage 的选项卡中放置一个按钮?

如何使Xamarin Forms App自动更新?

即使在 Xamarin Forms 中滚动页面的最右侧或最下方,如何使轴/索引始终可见?