PowerApps 中的按钮控件Button control in PowerApps

用户单击或点击后可与应用进行交互的控件。A control that the user can click or tap to interact with the app.

说明Description

将“按钮”控件的“OnSelect”属性配置为,在用户单击或点击控件时运行一个或多个公式。Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

关键属性Key properties

OnSelect – 用户点击或单击某个控件时应用响应的方式。OnSelect – How the app responds when the user taps or clicks a control.

Text – 在控件上显示或用户键入到控件中的文本。Text – Text that appears on a control or that the user types into a control.

其他属性Additional properties

Align – 文本相对于其控件的水平居中的位置。Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect - 在“OnSelect”行为运行时自动禁用控件。AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – 控件边框的颜色。BorderColor – The color of a control's border.

BorderStyle – 控件边框是实线虚线点线还是BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – 控件边框的粗细。BorderThickness – The thickness of a control's border.

FocusedBorderThickness - 控件具有键盘焦点时的边框粗细。FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color – 控件中文本的颜色。Color – The color of text in a control.

DisplayMode – 此控件是允许用户输入 (Edit)、仅显示数据 (View),还是已禁用 (Disabled)。DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件边框的颜色。DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – 控件的 DisplayMode 属性设置为 Disabled 时,该控件中的文本颜色。DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – 控件的 DisplayMode 属性设置为 Disabled 时,该控件的背景颜色。DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – 控件的背景颜色。Fill – The background color of a control.

Font – 文本中所显示的字体系列的名称。Font – The name of the family of fonts in which text appears.

FontWeight – 控件中文本的粗细:粗体半粗体正常细体FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – 控件上边缘和下边缘之间的距离。Height – The distance between a control's top and bottom edges.

HoverBorderColor – 用户将鼠标指针停留在控件上时,该控件边框的颜色。HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – 用户将鼠标指针停留在控件上时,该控件中的文本颜色。HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – 用户将鼠标指针停留在控件上时,该控件的背景颜色。HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – 控件中的文本是否为斜体。Italic – Whether the text in a control is italic.

PaddingBottom - 控件中的文本与此控件的下边缘之间的距离。PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft - 控件中的文本与该控件的左边缘之间的距离。PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight - 控件中的文本与该控件的右边缘之间的距离。PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop - 控件中的文本与此控件的上边缘之间的距离。PaddingTop – The distance between text in a control and the top edge of that control.

Pressed - 如果用户按下控件,值为“true”,否则值为“false”。PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – 用户在点击或单击控件时,该控件边框的颜色。PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – 用户在点击或单击控件时,该控件中的文本的颜色。PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – 用户在点击或单击控件时,该控件的背景色。PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – 控件左下角圆角的程度。RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – 控件右下角圆角的程度。RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – 控件左上角圆角的程度。RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – 控件右上角圆角的程度。RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – 控件上显示的文本的字号。Size – The font size of the text that appears on a control.

Strikethrough – 通过文本显示的线是否在控件上显示。Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex - 设置为非零值时,在运行时自定义控件的选项卡顺序。TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip – 用户将鼠标悬停在控件上时显示的解释性文本。Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – 在文本下方显示的线是否在控件上显示。Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – 控件上的文本相对于该控件垂直居中的位置。VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – 控件显示还是隐藏。Visible – Whether a control appears or is hidden.

Width – 控件左边缘和右边缘之间的距离。Width – The distance between a control's left and right edges.

X - 控件左边缘与其父容器(如果没有父容器,则为屏幕)左边缘之间的距离。X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y - 控件上边缘与其父容器(如果没有父容器,则为屏幕)上边缘之间的距离。Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

示例Examples

向按钮添加基本公式Add a basic formula to a button

  1. 添加“文本输入”控件,然后将其命名为“Source”。Add a Text input control, and name it Source.

    不知道如何添加、命名和配置控件Don't know how to add, name, and configure a control?

  2. 添加“按钮”控件,将“Text”属性设置为“Add”,并将“OnSelect”属性设置为以下公式:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    想要详细了解 UpdateContext 函数或其他函数吗?Want more information about the UpdateContext function or other functions?

  3. 添加“标签”控件,将“Text”属性设置为“Total”,再按 F5 键。Add a Label control, set its Text property to Total, and then press F5.
  4. 清除“源”中的默认文本,键入数字,再单击或点击“添加”。Clear the default text from Source, type a number in it, and then click or tap Add.

    此时,“标签”控件显示所键入的数字。The Label control shows the number that you typed.

  5. 清除“源”中的数字,键入另一个数字,再单击或点击“添加”。Clear the number from Source, type another number in it, and then click or tap Add.

    此时,“标签”控件显示键入的两个数字之和。The Label control shows the sum of the two numbers that you typed.

  6. (可选)重复执行上述步骤一次或多次。(optional) Repeat the previous step one or more times.
  7. 若要返回到默认工作区,请按 Esc 键(或单击或点击右上角的关闭图标)。To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

使用多个公式配置按钮Configure a button with multiple formulas

添加用于在两次输入间隔清除“文本输入”控件的公式。Add a formula that clears the Text input control between entries.

  1. 将“源”的“HintText”属性设置为“输入一个数字”。Set the HintText property of Source to "Enter a number".
  2. 将“添加”的“OnSelect”属性设置为以下公式:Set the OnSelect property of Add to this formula:

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

    注意:用分号“;”分隔多个公式。Note: Separate multiple formulas with a semi-colon “;”.

  3. 将“源”的“Default”属性设置为“ClearInput”。Set the Default property of Source to ClearInput.
  4. 按 F5,再通过同时添加多个数字来测试应用。Press F5, and then test the app by adding several numbers together.

添加另一个总和重置按钮Add another button to reset the total

添加另一个按钮,以便在两次计算间隔清除总和。Add a second button to clear the total between calculations.

  1. 添加另一个“按钮”控件,将“Text”属性设置为“Clear”,并将“OnSelect”属性设置为以下公式:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. 按 F5,将多个数字相加,再单击或点击“清除”来重置总和。Press F5, add several numbers together, and then click or tap Clear to reset the total.

更改按钮外观Change a button's appearance

更改按钮形状Change a button's shape

默认情况下,PowerApps 创建具有圆角的矩形“按钮”控件。By default, PowerApps creates a rectangular Button control with rounded corners. 可以设置“Height”、“Width”和“Radius”属性,对“按钮”控件的形状进行基本修改。You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

注意:“图标和形状”提供了多种设计,并可执行“按钮”控件计算的一些基本函数。Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. 不过,“图标和形状”没有“Text”属性。However, Icons and Shapes don’t have a Text property.

  1. 添加“按钮”控件,并将“Height”和“Width”属性设置为“300”,以生成大方形按钮。Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. 修改“RadiusTopLeft”、“RadiusTopRight”、“RadiusBottomLeft”,和“RadiusBottomRight”属性,以调整每个角的曲率。Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. 下面的示例展示了一些不同形状的按钮,每种都在 300x300 方形按钮基础之上生成:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

更改按钮的鼠标悬停颜色Change a button's color when you hover over it

默认情况下,当有鼠标悬停在“按钮”控件之上时,填充颜色会变暗 20%。By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. 可以通过更改使用“ColorFade”函数的“HoverFill”属性来调整此行为。You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. 如果将“ColorFade”公式设置为正百分比,当有鼠标悬停在按钮之上时,颜色会变浅;而如果将此公式设置为负百分比,则鼠标悬停颜色将会变深。If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • 更改所创建的一个按钮的“HoverFill”属性中的“ColorFade”百分比,并观察效果。Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

也可以将按钮的“HoverFill”属性设置为包含“ColorValue”函数(而不是“ColorFade”函数)的公式,从而指定“按钮”的颜色,如 ColorValue("Red") 所示。You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

注意:颜色值可以是任意 CSS 颜色定义(可以是名称,也可以是十六进制值)。Note: The color value can be any CSS color definition, either a name or a hex value.

  • 在创建的一个按钮中,将“ColorFade”函数替换为“ColorValue”函数,并观察效果。Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.