Power Apps 中的 按钮 控件
用户单击或点击后可与应用进行交互的控件。
描述
将 按钮 控件的 OnSelect 属性配置为,在用户单击或点击控件时运行一个或多个公式。
键属性
OnSelect – 当用户点击或单击控件时要执行的操作。
Text – 在控件上显示或用户键入到控件中的文本。
其他属性
Align – 文本相对于其控件的水平居中的位置。
AutoDisableOnSelect – 在 OnSelect 行为运行时自动禁用控件。
BorderColor – 控件边框的颜色。
BorderStyle – 控件边框是 Solid、Dashed、Dotted 还是 None。
BorderThickness – 控件边框的粗细。
Color – 控件中文本的颜色。
DisplayMode – 此控件是允许用户输入 (Edit)、仅显示数据 (View),还是已禁用 (Disabled)。
DisabledBorderColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件边框的颜色。
DisabledColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件中的文本颜色。
DisabledFill – 控件的 DisplayMode 属性设置为 Disabled 时,该控件的背景色。
FocusedBorderColor – 当聚焦到控件时,控件的边框颜色。
FocusedBorderThickness – 当聚焦到控件时,控件的边框粗细。
Fill – 控件的背景色。
Font – 文本中所显示的字体系列的名称。
FontWeight – 控件中文本的粗细:Bold、Semibold、Normal 或 Lighter。
Height – 控件上边缘和下边缘之间的距离。
HoverBorderColor – 用户将鼠标指针停留在控件上时,该控件边框的颜色。
HoverColor – 用户将鼠标指针停留在控件上时,该控件中的文本颜色。
HoverFill – 用户将鼠标指针停留在控件上时,该控件的背景色。
Italic – 控件中的文本是否为斜体。
PaddingBottom – 控件中的文本与该控件下边缘之间的距离。
PaddingLeft – 控件中的文本与该控件左边缘之间的距离。
PaddingRight – 控件中的文本与该控件右边缘之间的距离。
PaddingTop – 控件中的文本与该控件上边缘之间的距离。
Pressed – 如果用户按下控件,值为 true,否则值为 false。
PressedBorderColor – 用户在点击或单击控件时,该控件边框的颜色。
PressedColor – 用户在点击或单击控件时,该控件中的文本的颜色。
PressedFill – 用户在点击或单击控件时,该控件的背景色。
RadiusBottomLeft – 控件左下角圆角的程度。
RadiusBottomRight – 控件右下角圆角的程度。
RadiusTopLeft – 控件左上角圆角的程度。
RadiusTopRight – 控件右上角圆角的程度。
Size – 控件上显示的文本的字号。
Strikethrough – 通过文本显示的线是否在控件上显示。
TabIndex – 相对于其他控件的键盘导航顺序。
Tooltip – 用户将鼠标悬停在控件上时显示的解释性文本。
Underline – 在文本下方显示的线是否在控件上显示。
VerticalAlign – 控件上的文本相对于该控件垂直居中的位置。
Visible – 控件显示还是隐藏。
Width – 控件左边缘和右边缘之间的距离。
X – 控件左边缘与其父容器(如果没有父容器,则为屏幕)左边缘之间的距离。
Y – 控件上边缘与其父容器(如果没有父容器,则为屏幕)上边缘之间的距离。
相关函数
Navigate( ScreenName, ScreenTransitionValue )
示例
向按钮添加基本公式
添加 文本输入 控件,然后将其命名为 Source。
不知道如何添加、命名和配置控件?
添加 按钮 控件,将**Text** 属性设置为“Add”,并将 OnSelect 属性设置为以下公式:
UpdateContext({Total:Total + Value(Source.Text)})想要详细了解 UpdateContext 函数或其他函数吗?
清除源中的默认文本,键入数字,再单击或点击添加。
此时,标签 控件显示所键入的数字。
清除源中的数字,键入另一个数字,再单击或点击添加。
此时,标签 控件显示键入的两个数字之和。
(可选)重复执行上述步骤一次或多次。
若要返回到默认工作区,请按 Esc 键(或单击或点击右上角的关闭图标)。
使用多个公式配置按钮
添加用于在两次输入间隔清除 文本输入 控件的公式。
将源的 HintText 属性设置为“Enter a number”。
将添加的 OnSelect 属性设置为以下公式:
UpdateContext({Total:Total + Value(Source.Text)});
UpdateContext({ClearInput: ""})备注
请用分号“;”隔开多个公式。
将源的 Default 属性设置为 ClearInput。
按 F5,再通过同时添加多个数字来测试应用。
添加另一个总和重置按钮
添加另一个按钮,以便在两次计算间隔清除总和。
添加另一个 按钮 控件,将**Text** 属性设置为“Clear”,并将 OnSelect 属性设置为以下公式:
UpdateContext({Total:0})
按 F5,将多个数字相加,再单击或点击Clear来重置总和。
更改按钮外观
更改按钮形状
默认情况下,Power Apps 创建具有圆角的矩形 按钮 控件。 可以设置 Height、Width 和 Radius 属性,对 按钮 控件的形状进行基本修改。
修改 RadiusTopLeft、RadiusTopRight、RadiusBottomLeft 和 RadiusBottomRight 属性,以调整每个角的曲率。 下面的示例展示了一些不同形状的按钮,每种都在 300x300 方形按钮基础之上生成:
- 将所有四个 Radius 值设置为 150,以创建圆形按钮。
- 将 RadiusTopLeft 和 RadiusBottomRight 的值设置为 300,以创建叶形按钮控件。
- 将 RadiusTopLeft 和 RadiusTopRight 的值设置为 300,并将 RadiusBottomLeft 和 RadiusBottomRight 的值设置为 100,以创建选项卡形状的按钮。
更改按钮的鼠标悬停颜色
默认情况下,当有鼠标悬停在 按钮 控件之上时,填充颜色会变暗 20%。 可以通过更改使用 ColorFade 函数的 HoverFill 属性来调整此行为。 如果将 ColorFade 公式设置为正百分比,当有鼠标悬停在按钮之上时,颜色会变浅;而如果将此公式设置为负百分比,则鼠标悬停颜色将会变深。
也可以将 按钮 的 HoverFill 属性设置为包含 ColorValue 函数(而不是 ColorFade 函数)的公式,从而指定 按钮 控件的颜色,如 ColorValue("Red") 所示。
备注
颜色值可以是任意 CSS 颜色定义(可以是名称,也可以是十六进制值)。
- 在创建的一个按钮中,将 ColorFade 函数替换为 ColorValue 函数,并观察效果。
辅助功能准则
颜色对比度
- 适用标准颜色对比度要求。
屏幕阅读器支持
- Text 必须存在。
键盘支持
- TabIndex 必须为零或更大,以便键盘用户可以导航到它。
- 焦点指示器必须清晰可见。 可以使用 FocusedBorderColor 和 FocusedBorderThickness 来实现此目的。