Komponenten zur Erstellung von Apps

App Designer und UI Figures unterstützen eine große Anzahl von Komponenten zur Gestaltung moderner, voll funktionsfähiger Anwendungen. In den nachstehenden Tabellen sind die verfügbaren Komponenten aufgeführt.

  • Allgemeine Komponenten: Nehmen Sie Komponenten auf, die auf Interaktionen reagieren, wie z. B. Schaltflächen, Schieberegler, Dropdown-Listen und Bäume.

  • Achsen: Nehmen Sie Achsen zur Erstellung von Diagrammen zur Visualisierung und Auswertung von Daten auf.

  • Container und Diagrammwerkzeuge: Nehmen Sie Bedienfelder und Registerkarten zur Gruppierung von Komponenten sowie Menüleisten auf.

  • Instrumentierungskomponenten: Nehmen Sie Messanzeigen und Leuchten zur Visualisierung des Status sowie Knöpfe und Schalter zur Auswahl der Eingabeparameter auf.

  • Erweiterbare Komponenten: Nehmen Sie benutzerdefinierte UI-Komponenten auf, die Sie selbst erstellen. Erstellen Sie Schnittstellen zu Bibliotheken von Drittanbietern, um Inhalte wie Widgets oder Datenvisualisierungen anzuzeigen.

  • Toolbox-Komponenten: Nehmen Sie mit Toolboxen erstellte UI-Komponenten auf. Dazu ist eine zusätzliche Toolbox-Lizenz und -Installation erforderlich.

Alle Komponenten sind programmatisch verfügbar. Die meisten UI-Komponenten sind auch in der Component Library von App Designer verfügbar und können per Drag-and-Drop auf die Arbeitsfläche gezogen werden. Wie Komponenten in App Designer zu einer App hinzugefügt werden, die nicht in der Component Library verfügbar sind oder die dynamisch zur laufenden App hinzufügt werden sollen, erfahren Sie unter Add UI Components to App Designer Programmatically.

Beim Aufrufen von Grafikfunktionen in App Designer ist der Workflow etwas anders als bei der Verwendung der MATLAB®-Befehlszeile. Weitere Informationen über den Aufruf von Grafikfunktionen in App Designer finden Sie unter Display Graphics in App Designer.

Gängige Komponenten

Informationen zur KomponenteBeispiel
Button

Push button with a bar chart icon to the left of the label "Plot Data"

CheckBox

A cleared check box labeled "Remove Outliers" and a selected check box beneath it labeled "Add Trendline"

ColorPicker

Color picker component. The color picker is expanded and shows a set of standard colors and recent colors and a preview of the selected color.

DatePicker

An expanded date picker that displays drop-down menus for month and year, and the calendar for your selection. It also has icons that switch the calendar view to the previous month, the current date, or the next month.

DropDown

Two drop-down components. The top drop-down is editable and collapsed. The bottom drop-down component is not editable. It is expanded and shows items "Red", "Green", and "Blue".

NumericEditField

Numeric edit field that shows the number 12. The edit field label is "Sample Size".

EditField

A text edit field for entering a name displays "Cleve"

Hyperlink

A hyperlink with the display text "MathWorks home page" and a tooltip that displays the URL of the MathWorks website.

Image

An image component showing the MathWorks L-shaped Membrane logo

Label

Label that says "Select an Option" in bold font

ListBox

List box with three items: "Red", "Green", and "Blue"

ButtonGroup
RadioButton

Button group labeled "Select a Color" with three vertically stacked radio buttons. From top to bottom, the radio buttons are labeled "Red", "Green", and "Blue".

Slider

Two slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation. Its value is set to 40. The slider on the right is in a vertical orientation and its value is set to 75.

RangeSlider

Two range slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation with a range of values between 20 and 60. The slider on the right is in a vertical orientation with a range of values between 10 and 90.

Spinner

Spinner component with its value set to zero

StateButton

Two state buttons stacked vertically. The top button is labeled "Start". It is light gray in color. The bottom button labeled "Stop" is a darker gray.

Table

A table UI component that shows three columns: "LastName", "Age", and "Smoker". The table is sorted by last name in ascending order. The first two cells in the "Age" column are greater than 40 and appear in blue bold font. The third cell in the "Smoker" column shows a selected check box and the background color of the cell is yellow.

TextArea

Text area with the text "This sample might be an outlier"

ButtonGroup
ToggleButton

Toggle button group labeled "Water Temperature (C)". It contains three vertically stacked toggle buttons. From top to bottom the buttons are labeled "0", "40", and "100". The "40" button is a darker gray color.

Tree
TreeNode

A tree with one node called "Samples" that is expanded to show its two nested nodes "Cape Ann" and "Nantucket". Each of these three nodes shows a blue file icon to the left of their label text. The "Cape Ann" node is also expanded to show two nested nodes called "Water Quality" and "Air Quality".

CheckBoxTree
TreeNode

A tree with three parent nodes called "Sedimentary", "Igneous", and "Metamorphic". The node called "Sedimentary" is unchecked and collapsed, the node called "Igneous" is checked and collapsed, and the node called "Metamorphic" is partially checked and expanded to show its nested nodes "Slate" , "Marble", and "Gneiss". Each of the nodes shows a check box to the left of their label text.

Achsen

Informationen zu AchsenBeispiel
UIAxes Properties

A mesh surface plot

Axes Properties
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Two normalized histogram plots in the same axes. A blue histogram is centered near zero and an orange one is centered near one.

GeographicAxes Properties
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Set of geographic axes that uses the 'colorterrain' basemap. A solid red line is plotted between two points: Imperial Beach, California and San Francisco, California. The two end points are marked with red asterisks.

PolarAxes Properties
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Scatter chart in polar coordinates

Container und Diagrammwerkzeuge

Informationen zu ContainernBeispiel

GridLayout

Grid layout manager shown as selected on the App Designer canvas. The cursor is over the configure icon, and a tooltip next to it says "Configure grid layout".

Panel

Empty panel with the label "Data".

TabGroup
Tab

Tab group with two tabs called "Data" and "Plots". The "Data" tab is selected. It is a lighter gray than the "Plots" tab.

Menu

Menu bar with the "File" menu expanded to show three submenus called "Open", "Save", and "Export"

ContextMenu

A context menu for a date picker component. The context menu has two menu items called "Change Format" and "Restore Defaults".

Toolbar
PushTool
ToggleTool

Custom toolbar that, from left to right, shows an orange download icon, a dark gray email icon, and an orange help icon with a vertical separator to the left of it

Dialogfenster und Benachrichtigungen

Informationen zu DialogfensternBeispiel
uialert
Dieses Objekt kann nur programmatisch hinzugefügt werden.

An Invalid File dialog box displayed in front of a UI figure. A red octagon icon with a white exclamation point appears to the left of an alert message that says "File not found".

uiconfirm
Dieses Objekt kann nur programmatisch hinzugefügt werden.

A Confirm Save dialog box with the message "Saving these changes will overwrite previous changes." The options it presents are "Overwrite", "Save as new", and "Cancel".

uiprogressdlg
Dieses Objekt kann nur programmatisch hinzugefügt werden.

A progress dialog box displayed in front of a UI figure. The message displayed above the progress bar says "Loading your data". A blue progress bar shows that the process is one-third complete.

uisetcolor
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Color picker dialog box that shows the standard colors, recent colors, and preview of the default color which is set to yellow

uigetfile
Dieses Objekt kann nur programmatisch hinzugefügt werden.

File selection dialog box

uiputfile
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Save to file dialog box

uigetdir
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Folder selection dialog box

uiopen
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Load file into workspace dialog box

uisave
Dieses Objekt kann nur programmatisch hinzugefügt werden.

Save workspace variables dialog box

Instrumentierung

Informationen zur KomponenteBeispiel
Gauge

Circular gauge with limits ranging from zero to 100 and a value set to 60

NinetyDegreeGauge

Ninety degree gauge with limits ranging from zero to 100 and a value set to 60

LinearGauge

Linear gauge with limits ranging from zero to 100 and a value set to 60

SemicircularGauge

Semicircular gauge with limits ranging from zero to 100 and a value set to 60

Knob

Knob with limits ranging from zero to 100. The value is set to zero.

DiscreteKnob

Discrete knob with items, "Off", "Low", "Medium", and "High". The knob value is set to "Off."

Lamp

Lamp component with green color

Switch

Slider switch with the slider to the left in the off position

RockerSwitch

Rocker switch oriented vertically. The bottom of the rocker is pressed into the "Off" position.

ToggleSwitch

Toggle switch oriented vertically. The switch is toggled downward into the "Off" position.

Erweiterbare Komponenten

Informationen zur KomponenteBeispiel

matlab.ui.componentcontainer.ComponentContainer-Klasse

matlab.graphics.chartcontainer.ChartContainer-Klasse

Component container that combines a custom chart and custom color picker component along with a check box and a spinner.

HTML

Two HTML UI components stacked vertically. The top component shows formatted text and the bottom component shows a web page.

Toolbox-Komponenten

Apps, die in App Designer oder mit der Funktion uifigure erstellt werden, unterstützen Komponenten in mehreren zusätzlichen Produkten. Zur Verwendung dieser Komponenten ist eine gültige Lizenz und die Installation des zugehörigen Produkts erforderlich.

Siehe auch

Themen