Power Apps 中的 按钮 控件

用户单击或点击后可与应用进行交互的控件。

描述

按钮 控件的 OnSelect 属性配置为,在用户单击或点击控件时运行一个或多个公式。

键属性

OnSelect – 当用户点击或单击控件时要执行的操作。

Text – 在控件上显示或用户键入到控件中的文本。

其他属性

Align – 文本相对于其控件的水平居中的位置。

AutoDisableOnSelect – 在 OnSelect 行为运行时自动禁用控件。

BorderColor – 控件边框的颜色。

BorderStyle – 控件边框是 SolidDashedDotted 还是 None

BorderThickness – 控件边框的粗细。

Color – 控件中文本的颜色。

DisplayMode – 此控件是允许用户输入 (Edit)、仅显示数据 (View),还是已禁用 (Disabled)。

DisabledBorderColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件边框的颜色。

DisabledColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件中的文本颜色。

DisabledFill – 控件的 DisplayMode 属性设置为 Disabled 时,该控件的背景色。

FocusedBorderColor – 当聚焦到控件时,控件的边框颜色。

FocusedBorderThickness – 当聚焦到控件时,控件的边框粗细。

Fill – 控件的背景色。

Font – 文本中所显示的字体系列的名称。

FontWeight – 控件中文本的粗细:BoldSemiboldNormalLighter

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 )

示例

向按钮添加基本公式

  1. 添加 文本输入 控件,然后将其命名为 Source

    不知道如何添加、命名和配置控件

  2. 添加 按钮 控件,将**Text** 属性设置为“Add”,并将 OnSelect 属性设置为以下公式:
    UpdateContext({Total:Total + Value(Source.Text)})

    想要详细了解 UpdateContext 函数或其他函数吗?

  3. 添加**标签** 控件,在编辑栏中将其 Text 属性设置为 Value(Total),然后按 F5

  4. 清除中的默认文本,键入数字,再单击或点击添加

    此时,标签 控件显示所键入的数字。

  5. 清除中的数字,键入另一个数字,再单击或点击添加

    此时,标签 控件显示键入的两个数字之和。

  6. (可选)重复执行上述步骤一次或多次。

  7. 若要返回到默认工作区,请按 Esc 键(或单击或点击右上角的关闭图标)。

使用多个公式配置按钮

添加用于在两次输入间隔清除 文本输入 控件的公式。

  1. HintText 属性设置为“Enter a number”。

  2. 添加OnSelect 属性设置为以下公式:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    备注

    请用分号“;”隔开多个公式。

  3. Default 属性设置为 ClearInput

  4. F5,再通过同时添加多个数字来测试应用。

添加另一个总和重置按钮

添加另一个按钮,以便在两次计算间隔清除总和。

  1. 添加另一个 按钮 控件,将**Text** 属性设置为“Clear”,并将 OnSelect 属性设置为以下公式:

    UpdateContext({Total:0})

  2. F5,将多个数字相加,再单击或点击Clear来重置总和。

更改按钮外观

更改按钮形状

默认情况下,Power Apps 创建具有圆角的矩形 按钮 控件。 可以设置 HeightWidthRadius 属性,对 按钮 控件的形状进行基本修改。

备注

“图标”和“形状”提供了各种设计,并可执行 按钮 控件执行的一些基本函数。 不过,图标和形状 没有 Text 属性。

  1. 添加 按钮 控件,并将 HeightWidth 属性设置为 300,以生成大方形按钮。

  2. 修改 RadiusTopLeftRadiusTopRightRadiusBottomLeftRadiusBottomRight 属性,以调整每个角的曲率。 下面的示例展示了一些不同形状的按钮,每种都在 300x300 方形按钮基础之上生成:

更改按钮的鼠标悬停颜色

默认情况下,当有鼠标悬停在 按钮 控件之上时,填充颜色会变暗 20%。 可以通过更改使用 ColorFade 函数的 HoverFill 属性来调整此行为。 如果将 ColorFade 公式设置为正百分比,当有鼠标悬停在按钮之上时,颜色会变浅;而如果将此公式设置为负百分比,则鼠标悬停颜色将会变深。

  • 更改所创建的一个按钮的 HoverFill 属性中的 ColorFade 百分比,并观察效果。

也可以将 按钮 的 HoverFill 属性设置为包含 ColorValue 函数(而不是 ColorFade 函数)的公式,从而指定 按钮 控件的颜色,如 ColorValue("Red") 所示。

备注

颜色值可以是任意 CSS 颜色定义(可以是名称,也可以是十六进制值)。

  • 在创建的一个按钮中,将 ColorFade 函数替换为 ColorValue 函数,并观察效果。

辅助功能准则

颜色对比度

屏幕阅读器支持

  • Text 必须存在。

键盘支持

备注

您能告诉我们您的文档语言首选项吗? 进行简短调查。(请注意,此调查是英文版调查)

此调查大约需要七分钟。 不会收集个人数据(隐私声明)。