Power Apps 中的按钮控件

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

描述

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

关键属性

OnSelect – 用户点击或单击某个控件时应用响应的方式。

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

其他属性

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. 添加 Text input 控件,然后将其命名为 Source

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

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

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

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

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

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

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

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

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

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

使用多个公式配置按钮

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

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

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

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

    备注

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

  3. Default 属性设置为 ClearInput

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

添加另一个总和重置按钮

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

  1. 添加另一个 Button 控件,将 文本 属性设置为“Clear”,并将 OnSelect 属性设置为以下公式:

    UpdateContext({Total:0})

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

更改按钮外观

更改按钮形状

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

备注

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

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

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

更改按钮的鼠标悬停颜色

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

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

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

备注

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

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

辅助功能准则

颜色对比度

屏幕阅读器支持

键盘支持