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 - 如何摆脱悬停在按钮上时出现的边框