macos_ui
Version 2.1.0
Flutter -Widgets und Themen, die die aktuelle MacOS -Designsprache implementieren.
Schauen Sie sich unsere interaktive Widget Gallery online unter https://macosui.github.io/macos_ui/#/ an
Leitfäden, Codelaber und andere Dokumentationen finden Sie unter https://macosui.dev
macos_ui wird gegen Flutters stable Kanal entwickelt. Um eine reibungslose Entwicklungserfahrung mit macos_ui zu gewährleisten, sollten Sie Ihre Anwendung auf Flutters stable Kanal erstellen.
Pub.dev zeigt, dass macos_ui nur macOS unterstützt. Dies liegt daran, dass macos_ui einen nativen Code aufruft und daher MacOS als Plugin -Plattform in der Datei pubspec.yaml angibt.
macos_ui arbeitet technisch gesehen auf jeder Plattform, die Flutter unterstützt, aber Sie erhalten die besten Ergebnisse auf macOS . Die Unterstützung der Nicht-Makos-Plattform ist nicht garantiert.
Die Funktionen von macos_ui , die aufgrund von nativem Code nicht auf anderen Plattformen als MacOS funktionieren, sind:
macos_window_utils zusammenhängtMacosColors.controlAccentColor() -FunktionMacosColorWell -WidgetDa Flattern zu diesem Zeitpunkt die UI -Elemente nicht über die Grenzen des Fensters überfließen lassen, werden Popups auf den verfügbaren Raum beschränkt.
Wenn Sie Widgets verwenden, die Popups in Ihrer Symbolleiste erstellen, z ToolBarPopupButton
macos_ui begrüßt Beiträge! Weitere Informationen finden Sie unter CONTRIBUTING.md .
MacosWindow ist der Grundrahmen für ein MacOS-Layout.
Es unterstützt eine Sidebar links, eine optionale TitleBar oben, und der Rest des Fensters wird normalerweise mit einem MacosScaffold ausgefüllt.
Ein Spielraum für den MacosWindow wird von MacosWindowScope bereitgestellt. Die Seitenleiste kann mit MacosWindowScope.of(context).toggleSidebar() . Bitte beachten Sie , dass Sie Ihr MacosScaffold in einem Builder -Widget einwickeln müssen, damit dies ordnungsgemäß funktioniert.
Eine Seitenleiste ermöglicht die App-Navigation und bietet schnellen Zugriff auf Top-Level-Sammlungen von Inhalten in Ihrer App.
Seitenleisten können links oder rechts von Ihrer App platziert werden. Verwenden Sie die MacosWindow.sidebar -Eigenschaft, um eine Seitenleiste links zu platzieren. Verwenden Sie die MacosWindow.endSidebar -Eigenschaft, um eine Seitenleiste rechts zu platzieren.
Beispiel Verwendung:
int pageIndex = 0 ;
...
MacosWindow (
sidebar : Sidebar (
minWidth : 200 ,
builder : (context, scrollController) {
return SidebarItems (
currentIndex : pageIndex,
scrollController : scrollController,
itemSize : SidebarItemSize .large,
onChanged : (i) {
setState (() => pageIndex = i);
},
items : const [
SidebarItem (
label : Text ( 'Page One' ),
),
SidebarItem (
label : Text ( 'Page Two' ),
),
],
);
},
),
endSidebar : Sidebar (
startWidth : 200 ,
minWidth : 200 ,
maxWidth : 300 ,
shownByDefault : false ,
builder : (context, _) {
return const Center (
child : Text ( 'End Sidebar' ),
);
},
),
), Das MacosScaffold ist das, was Sie eine "Seite" nennen könnten.
Das Gerüst verfügt über eine toolbar und ein children . children akzeptieren ein ContentArea -Widget und mehrere Widgets mit mehreren ResizablePane . Um die Navigation oder Routen unter dem Gerüst zu fangen, sollten Sie den MacosScaffold in eine CupertinoTabView einwickeln. Auf diese Weise wird die Navigation im MacosScaffold im MacosScaffold -Bereich angezeigt, anstatt das gesamte Fenster abzudecken. Um eine Route außerhalb eines MacosScaffold zu drücken, das in eine CupertinoTabView eingewickelt ist, verwenden Sie den Root Navigator Navigator.of(context, rootNavigator: true)
Die Dokumentation finden Sie in Beispielen für Anpassungen und ToolBar .
In Big Sur (MacOS 11) wurde ein neuer Look für MacOS -Apps eingeführt. Um diesen Look in Ihrer Flutter -App zu entsprechen, stützt sich MacOS_UI auf macOS_Window_utils, das ein minimales MacOS -Bereitstellungsziel von 10.14.6 erfordert. Stellen Sie daher sicher, dass Sie den Ordner macos/Runner.xcworkspace Ihres Projekts mit Xcode und nach Runner.xcodeproj suchen. Gehen Sie zu Info > Deployment Target und setzen Sie das macOS Deployment Target auf 10.14.6 oder höher. Öffnen Sie dann Podfile Ihres Projekts (wenn es nicht in Xcode angezeigt wird, finden Sie es im macos -Verzeichnis Ihres Projekts über VS -Code) und setzen Sie die minimale Bereitstellungsversion in der ersten Zeile auf 10.14.6 oder höher fest:
platform :osx , '10.14.6' Möglicherweise müssen Sie auch Runner.xcodeproj Ihrer App in Xcode öffnen und die minimale Bereitstellungsversion dort festlegen.
Konfigurieren Sie nun Ihr Fenster in Ihrem main() wie folgt:
/// This method initializes macos_window_utils and styles the window.
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .unified,
);
await config. apply ();
}
void main () async {
await _configureMacosWindowUtils ();
runApp ( const YourAppHere ());
} Bitte beachten Sie, dass Sie, wenn Sie eine Titelleiste ( TitleBar ) in Ihrem MacosWindow verwenden, den toolbarStyle Ihres Fensters auf NSWindowToolbarStyle.expanded festlegen sollten, um die Schließen, minimieren Sie die Schaltflächen mit Zoomfenster ordnungsgemäß aus:
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} In jedem anderen Fall sollten Sie es als NSWindowToolbarStyle.unified behalten.
Erstellt eine Symbolleiste in der MacosScaffold . Die Symbolleiste erscheint unter der Titelleiste (falls vorhanden) der MacOS -App oder integriert sie mithilfe ihrer title in sie.
Eine Symbolleiste bietet einen bequemen Zugriff auf häufig verwendete Befehle und Funktionen (Symbolleisteelemente). Verschiedene Routen Ihrer App könnten unterschiedliche Symbolleisten haben.
Die Symbolleisteelemente umfassen ToolBarIconButton , ToolBarPulldownButton und ToolBarSpacer -Widgets und sollten über die Eigenschaften der items bereitgestellt werden. Die Aktion jedes Symbolleisten -Elements sollte auch als Befehl der Menüleiste in Ihrer App bereitgestellt werden.
Symbolleisten sehen am besten aus und sind am einfachsten zu verstehen, wenn sie Elemente desselben Typs enthalten (verwenden Sie also entweder Etiketten für jedes Symbolleiste oder nicht).
Sie können die ToolBarSpacer -Widgets verwenden, um die Gruppierung der verschiedenen Symbolleistenaktionen festzulegen.
Eine Beispiel -Symbolleiste wäre:
ToolBar (
title : const Text ( 'Untitled Document' ),
titleWidth : 200.0 ,
leading : MacosBackButton (
onPressed : () => debugPrint ( 'click' ),
fillColor : Colors .transparent,
),
actions : [
ToolBarIconButton (
label : "Add" ,
icon : const MacosIcon (
CupertinoIcons .add_circled,
),
onPressed : () => debugPrint ( "Add..." ),
showLabel : true ,
),
const ToolBarSpacer (),
ToolBarIconButton (
label : "Delete" ,
icon : const MacosIcon (
CupertinoIcons .trash,
),
onPressed : () => debugPrint ( "Delete" ),
showLabel : false ,
),
ToolBarPullDownButton (
label : "Actions" ,
icon : CupertinoIcons .ellipsis_circle,
items : [
MacosPulldownMenuItem (
label : "New Folder" ,
title : const Text ( "New Folder" ),
onTap : () => debugPrint ( "Creating new folder..." ),
),
MacosPulldownMenuItem (
label : "Open" ,
title : const Text ( "Open" ),
onTap : () => debugPrint ( "Opening..." ),
),
],
),
]
),Dies baut diese einfache Symbolleiste auf:
Andere Beispiele für Symbolleiste:
Sie können auch Ihr eigenes CustomToolbarItem erstellen, um jede Art von Widget in die Symbolleiste aufzunehmen:
// Add a grey vertical line as a custom toolbar item:
CustomToolbarItem (
inToolbarBuilder : (context) => Padding (
padding : const EdgeInsets . all ( 8.0 ),
child : Container (color : Colors .grey, width : 1 , height : 30 ),
),
inOverflowedBuilder : (context) =>
Container (color : Colors .grey, width : 30 , height : 1 ),
),SliverToolBar SliverToolbar ist eine Variante der Standard ToolBar , wobei der wichtigste Unterschied darin besteht, dass (wie der Name schon sagt) mit scrollierbaren Widgets wie CustomScrollView und NestedScrollView kompatibel ist. Auf SliverToolBar gibt es drei zusätzliche Eigenschaften:
pinned , was feststellt, ob die Symbolleiste beim Scrollen sichtbar bleiben solltefloating , was feststelltopacity , die den Transluzenzeffekt der Symbolleiste verwaltetMit diesem Widget können Entwickler das Symbolleistenverhalten im App Store von Apple erreichen.
Stichprobenverbrauch:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Ein Widget, das das ListTile Widget in Flutters Materialbibliothek annähern soll.
Stichprobenverbrauch:
MacosListTile (
leading : const Icon ( CupertinoIcons .lightbulb),
title : Text (
'A robust library of Flutter components for macOS' ,
style : MacosTheme . of (context).typography.headline,
),
subtitle : Text (
'Create native looking macOS applications using Flutter' ,
style : MacosTheme . of (context).typography.subheadline. copyWith (
color : MacosColors .systemGrayColor,
),
),
), Eine mehrfache Schnittstelle, die jeweils eine Seite anzeigt. Muss in einem StatefulWidget verwendet werden.
Sie können die Platzierung der Registerkarten mithilfe der position steuern.
Verwendung:
final _controller = MacosTabController (
initialIndex : 0 ,
length : 3 ,
);
...
MacosTabView (
controller : _controller,
tabs : const [
MacosTab (
label : 'Tab 1' ,
),
MacosTab (
label : 'Tab 2' ,
),
MacosTab (
label : 'Tab 3' ,
),
],
children : const [
Center (
child : Text ( 'Tab 1' ),
),
Center (
child : Text ( 'Tab 2' ),
),
Center (
child : Text ( 'Tab 3' ),
),
],
),
Ein MacosIcon ist in jeder Hinsicht mit einer regulären Icon identisch - es respektiert ein MacosTheme . Verwenden Sie es genauso wie ein reguläres Symbol:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),Ein Kontrollkästchen ist eine Art Schaltfläche, mit der der Benutzer zwischen zwei entgegengesetzten Zuständen, Aktionen oder Werten auswählen kann. Ein ausgewähltes Kontrollkästchen wird in Betracht gezogen, wenn es ein Checkmark enthält, und ausgeschaltet, wenn es leer ist. Ein Kontrollkästchen folgt fast immer von einem Titel, es sei denn, es wird in einer Checkliste angezeigt. Erfahren Sie mehr
| Deaktiviert | Überprüft | Gemischt |
|---|---|---|
Hier ist ein Beispiel dafür, wie Sie ein grundlegendes Kontrollkästchen erstellen:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) Um ein Kontrollkästchen im mixed Zustand zu machen, setzen Sie value auf null .
Eine Hilfeschaltfläche wird in einer Ansicht angezeigt und öffnet App-spezifische Hilfedokumentation, wenn Sie klicken. Alle Hilfstasten sind kreisförmige, konstant große Tasten, die ein Fragezeichensymbol enthalten. Erfahren Sie mehr
Hier ist ein Beispiel dafür, wie Sie eine Hilfe -Schaltfläche erstellen:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) Sie können das Erscheinungsbild und das Verhalten der Help -Taste mithilfe des HelpButtonTheme anpassen. Es wird jedoch nicht von Apple empfohlen, das Erscheinungsbild der Hilfe -Button zu ändern.
Ein Optionsknopf ist eine kleine, kreisförmige Button, gefolgt von einem Titel. Die Optionsschaltflächen werden in der Regel in Gruppen von zwei bis fünf Personen dargestellt und bieten dem Benutzer eine Reihe von zugehörigen, aber gegenseitig ausschließlichen Auswahlmöglichkeiten. Der Status eines Optionsknopfs ist entweder ein (ein ausgefülltes Kreis) oder aus (ein leerer Kreis). Erfahren Sie mehr
Hier ist ein Beispiel dafür, wie Sie einen grundlegenden Optionsfeld erstellen:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Eine Pulldown-Taste (oft als Pulldown-Menü bezeichnet) ist eine Art Popup-Schaltfläche, die beim Klicken ein Menü mit einer Liste der Auswahlmöglichkeiten anzeigt. Das Menü wird unterhalb der Schaltfläche angezeigt. Sobald das Menü auf dem Bildschirm angezeigt wird, bleibt es geöffnet, bis der Benutzer einen Menüelement auswählt, außerhalb des Menüs klickt, zu einer anderen App wechselt oder die App beendet. oder bis das System eine Warnung anzeigt. Erfahren Sie mehr
Verwenden Sie eine Pull-Down-Taste, um eine Liste von Befehlen zu präsentieren. Eine Pulldown-Taste kann entweder einen title oder ein icon anzeigen, um den Inhalt des Menüs der Schaltfläche zu beschreiben. Wenn Sie ein Symbol verwenden, stellen Sie sicher, dass es den Zweck der Taste klar kommuniziert.
Wenn items null sind, wird die Taste deaktiviert (grau ausgegraut).
Ein title oder ein icon muss bereitgestellt werden, um als Titel der Pull-Down-Taste angezeigt zu werden, jedoch nicht beides gleichzeitig.
Das Menü kann auch mit den Auf und Ab -Tasten und einer Aktion mit der Rückgabetaste navigiert werden.
Es kann auch in der Symbolleiste über das ToolBarPulldownButton -Widget angezeigt werden.
| Dunkles Thema | Leichtes Thema |
|---|---|
Hier ist ein Beispiel dafür, wie Sie eine grundlegende Pulldown-Taste erstellen:
MacosPulldownButton (
title : "Actions" ,
// Or provide an icon to use as title:
// icon: CupertinoIcons.ellipsis_circle,
items : [
MacosPulldownMenuItem (
title : const Text ( 'Save' ),
onTap : () => debugPrint ( "Saving..." ),
),
MacosPulldownMenuItem (
title : const Text ( 'Save as...' ),
onTap : () => debugPrint ( "Opening Save As dialog..." ),
),
const MacosPulldownMenuDivider (),
MacosPulldownMenuItem (
enabled : false ,
title : const Text ( 'Export' ),
onTap : () => debugPrint ( "Exporting" ),
),
],
),Eine Popup-Schaltfläche (oft als Popup-Menü bezeichnet) ist eine Art von Schaltfläche, die beim Klicken ein Menü mit einer Liste der gegenseitig ausschließlichen Auswahl an zeigt. Das Menü wird oben auf der Schaltfläche angezeigt. Wie bei anderen Arten von Menüs kann ein Popup-Button-Menü Trennzeichen und Symbole wie Scheckmarks enthalten. Nachdem das Menü bekannt gegeben wurde, bleibt es geöffnet, bis der Benutzer ein Menüelement auswählt, außerhalb des Menüs klickt, zu einer anderen App wechselt oder die App beendet. oder bis das System eine Warnung anzeigt. Erfahren Sie mehr
Der Typ T des MacosPopupButton ist der Typ des Werts, den jedes Popup-Menüelement darstellt. Alle Einträge in einem bestimmten Menü müssen Werte mit konsistenten Typen darstellen. Typischerweise wird ein enum verwendet. Jedes MacosPopupMenuItem in Elementen muss auf das gleiche Argument des gleichen Typs spezialisiert sein.
Der onChanged -Rückruf sollte eine Statusvariable aktualisieren, die den Wert des Popup-Menüs definiert. Es sollte auch State.setState anrufen, um die Popup-Taste mit dem neuen Wert wieder aufzubauen.
Wenn Menüelemente in den verfügbaren Menübeschränkungen nicht angezeigt werden können, wird oben oder unten im geöffneten Menü eine Pflege angezeigt, um zu signalisieren, dass Elemente, die derzeit nicht sichtbar sind, nicht sichtbar sind.
Das Menü kann auch mit den Auf-/Abtasten und einem mit der Rückgabeschlüssel ausgewählten Element navigiert werden.
| Dunkles Thema | Leichtes Thema |
|---|---|
Hier ist ein Beispiel dafür, wie Sie eine grundlegende Popup-Taste erstellen:
String popupValue = 'One' ;
MacosPopupButton < String >(
value : popupValue,
onChanged : ( String ? newValue) {
setState (() {
popupValue = newValue ! ;
});
},
items : < String > [ 'One' , 'Two' , 'Three' , 'Four' ]
. map < MacosPopupMenuItem < String >>(( String value) {
return MacosPopupMenuItem < String >(
value : value,
child : Text (value),
);
}). toList (),
),Drücken von Tasten sind der Standard -Tastentyp in MacOS. Drücken Sie Schaltflächen enthalten Text - keine Symbole - und öffnen häufig ein separates Fenster, ein separates Dialogfeld oder ein App, damit der Benutzer eine Aufgabe erledigen kann. Erfahren Sie mehr
| Dunkles Thema | Leichtes Thema |
|---|---|
Beachten Sie, dass native Drucktasten als Text nur als Text mit einem Symbol oder nur als Symbol gestylt werden können. Derzeit werden nur Text-Push-Schaltflächen unterstützt. Verwenden Sie das MacosIconButton -Widget, um eine Nur-Symbol-Schaltfläche zu erstellen.
Hier ist ein Beispiel dafür, wie Sie eine grundlegende Drucktaste erstellen:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),Ein Schalter (auch als Schalter bezeichnet) ist eine Steuerung, die eine binäre Auswahl zwischen zwei gegenseitig ausschließlichen Zuständen bietet - ein- und ausgeschaltet. Ein Schalter zeigt, dass er angeht, wenn die Akzentfarbe sichtbar ist und ausgeschaltet ist, wenn der Schalter farblos erscheint.
Die ContolSize Enum kann an die Größe der size übergeben werden, um die Größe des Schalters zu steuern. MacosSwitch unterstützt die folgenden Steuergrößen:
minismallregular| Aus | An |
|---|---|
Hier ist ein Beispiel dafür, wie Sie einen einfachen Kippschalter erstellen:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),Erfahren Sie hier mehr über Switches.
Zeigt eine oder mehrere Navigationsregisterkarten in einer einzelnen horizontalen Gruppe an. Wird von MacosTabView verwendet, um zwischen den verschiedenen Registerkarten der Registerkartenleiste zu navigieren.
Die typische Verwendung dieses Widgets besteht MacosTabView , die Navigation seiner Kinder zu kontrollieren. Sie müssen kein MacosSegmentedControl mit Ihrem MacosTabView angeben, wie es von diesem Widget erstellt wird.
Verwendung:
showMacosAlertDialog (
context : context,
builder : (_) => MacosAlertDialog (
appIcon : FlutterLogo (size : 64 ),
title : Text (
'Alert Dialog with Primary Action' ,
style : MacosTheme . of (context).typography.headline,
),
message : Text (
'This is an alert dialog with a primary action and no secondary action' ,
textAlign : TextAlign .center,
style : MacosTypography . of (context).headline,
),
primaryButton : PushButton (
controlSize : ControlSize .large,
child : Text ( 'Primary' ),
onPressed : () {},
),
),
);Verwendung:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);Ein Textfeld ist ein rechteckiger Bereich, in dem der Benutzer eine oder mehrere Textzeilen eingibt oder bearbeitet. Ein Textfeld kann einen einfachen oder gestalteten Text enthalten.
Hier ist ein Beispiel für das Erstellen eines grundlegenden Textfelds:
MacosTextField (
placeholder : 'Type some text here' ,
)Ein Suchfeld ist ein Stil des Textfelds, das für die Durchführung textbasierter Suchvorgänge in einer großen Sammlung von Werten optimiert ist.
Wenn der Benutzer in das Suchfeld eingeben beginnt, wird in einem Overlay unten (oder darüber) im Feld eine Liste wählbarer Ergebnisse angezeigt.
| Dunkles Thema | Leichtes Thema |
|---|---|
Hier ist ein Beispiel dafür, wie Sie ein Suchfeld erstellen:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) Weitere Beispiele finden Sie in den examples/fields_page .
Etiketten sind eine kurze Beschreibung dessen, was ein Element auf dem Bildschirm tut.
Tooltips beschreiben Sie kurz, wie Sie Kontrollen verwenden, ohne den Fokus der Menschen von der primären Schnittstelle abzuwenden. Hilfetags werden angezeigt, wenn der Benutzer den Zeiger für einige Sekunden über ein Steuerelement positioniert. Ein Tooltip bleibt 10 Sekunden lang sichtbar oder bis sich der Zeiger von der Steuerung entzieht.
| Dunkles Thema | Leichtes Thema |
|---|---|
Um ein Tooltip zu erstellen, wickeln Sie jedes Widget auf einen MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), Sie können den Tooltip so anpassen, wie Sie es wünschen, indem Sie das TooltipTheme des Themas anpassen. Ein Tooltip passt sich automatisch an seine Umgebung an und reagiert auf Berührungs- und Zeigerereignisse. Um einen Tooltip mit einer Symbolleiste zu verwenden, geben Sie ihn mit einer tooltipMessage -Eigenschaft an.
Lassen Sie die Leute nicht herumliefen, um auf einen statischen Bildschirm zu starren und darauf zu warten, dass Ihre App Inhalte lädt oder lange Datenverarbeitungsvorgänge ausführt. Verwenden Sie Fortschrittsindikatoren, um die Leute wissen zu lassen, dass Ihre App nicht ins Stocken geraten ist, und geben Sie ihnen eine Vorstellung davon, wie lange sie warten werden.
Fortschrittsindikatoren haben zwei unterschiedliche Stile:
Menschen interagieren nicht mit Fortschrittsindikatoren. Sie werden jedoch häufig von einer Taste zum Abbrechen der entsprechenden Operation begleitet. Erfahren Sie mehr
Ein ProgressCircle kann entweder bestimmt oder unbestimmt sein.
| Bestimmen Sie den Fortschrittskreis | Unbestimmter Fortschrittskreis |
|---|---|
Hier ist ein Beispiel dafür, wie man einen unbestimmten Fortschrittskreis erstellt:
ProgressCircle (
value : null ,
), Sie können einen Null-Null-Wert für value bereitstellen, um den Fortschrittskreis zu bestimmen.
Eine ProgressBar kann nur bestimmt werden.
Hier ist ein Beispiel dafür, wie man eine bestimmte Fortschrittsleiste erstellt:
ProgressBar (
value : 30 ,
)Ein Level -Indikator stellt grafisch einen bestimmten Wert innerhalb eines Bereichs der numerischen Werte dar. Es ähnelt einem Slider in Zweck, aber visueller und enthält keine eindeutige Kontrolle für die Auswahl eines Wertes - das Klicken und Ziehen über den Level -Indikator selbst, um einen Wert auszuwählen, wird jedoch unterstützt. Ein Level -Indikator kann auch Zeckenspuren enthalten, was es dem Benutzer erleichtert, einen bestimmten Wert im Bereich zu bestimmen. Es gibt drei verschiedene Indikatorstile mit jeweils unterschiedlichem Erscheinungsbild, um Kapazität, Bewertung und Relevanz zu kommunizieren.
Ein Kapazitätsindikator zeigt das aktuelle Niveau in Bezug auf eine endliche Kapazität. Kapazitätsindikatoren werden häufig bei Kommunikation von Faktoren wie Scheiben- und Batterieverbrauch verwendet. Erfahren Sie mehr
Hier ist ein Beispiel dafür, wie Sie einen interaktiven Indikator für kontinuierliche Kapazitäten erstellen:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), Sie können discrete auf true setzen, um es zu einem diskreten Kapazitätsindikator zu machen.
Ein Schieberegler ist eine Kontrolle, mit der die Leute einen Wert aus einem kontinuierlichen oder diskreten Wertebereich auswählen können, indem sie den Schieberegleiter verschieben.
| Kontinuierlich | Diskret |
|---|---|
| Ein horizontaler Schieber | Ein horizontaler Schieberegler, bei dem nur diskrete Werte zwischen einem Min und Max ausgewählt werden können. Zeckenspuren werden häufig angezeigt, um einen Kontext bereitzustellen. |
Hier ist ein Beispiel dafür, wie man einen interaktiven kontinuierlichen Schieberegler erstellt:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),Eine Bewertungsanzeige verwendet eine Reihe horizontal angeordneter grafischer Symbole, um ein Ranking -Level zu kommunizieren. Das Standardsymbol ist ein Stern.
In einem Bewertungsanzeigen werden keine Teilsymbole angezeigt. Der Wert wird nur abgerundet, um nur vollständige Symbole anzuzeigen. Innerhalb eines Bewertungsindikators sind die Symbole immer gleich voneinander entfernt und erweitern oder schrumpfen nicht, um die Steuerung anzupassen. Erfahren Sie mehr
Hier ist ein Beispiel dafür, wie Sie einen interaktiven Bewertungsindikator erstellen:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)Lassen Sie den Benutzer ein Datum auswählen.
Es gibt drei Arten von MacosDatePickers :
textual : Ein Nur-Text-Datumspicker, bei dem der Benutzer den Tag, den Monat oder das Jahr auswählen muss und die Kartonkontrollschaltflächen verwenden muss, um den Wert zu ändern. Dies ist nützlich, wenn Platz in Ihrer App eingeschränkt ist.graphical : Ein Visual Date Picker, bei dem der Benutzer durch eine kalenderähnliche Schnittstelle navigieren kann, um ein Datum auszuwählen.combined : Bietet sowohl textual als auch graphical Schnittstellen. Die Lokalisierung der Zeit, die Picker durch die weekdayAbbreviations und monthAbbreviations (anstelle von z. B. Standard localizations.narrowWeekdays() ) unterstützt.
weekdayAbbreviations sollten eine Liste von 7 Saiten sein, eine für jeden Wochentag, beginnend mit SonntagmonthAbbreviations sollte eine Liste von 12 Saiten sein, eine für jeden Monat des Jahres, beginnend mit Januar Sie können auch das dateFormat definieren, um die Art und Weise zu ändern, wie Daten in der Textoberfläche angezeigt werden. Es dauert eine Reihe von Token (Fall-unempfindlich) und ersetzt sie durch ihre entsprechenden Werte. Die folgenden Token werden unterstützt:
D : Tag des Monats (1-31)DD : Tag des Monats (01-31)M : Monat des Jahres (1-12)MM : Monat des Jahres (01-12)YYYY : Jahr (0000-9999)/ , - . ) Das Standardformat ist M/D/YYYY .
Beispiel Verwendung:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Lassen Sie den Benutzer eine Zeit auswählen.
Es gibt drei Arten von MacosTimePickers :
textual : Ein nur Text-Time-Picker, bei dem der Benutzer die Stunde oder Minute auswählen muss und mit den Pflege-Kontroll-Schaltflächen den Wert geändert wird. Dies ist nützlich, wenn Platz in Ihrer App eingeschränkt ist.graphical : Ein visueller Zeitpicker, bei dem der Benutzer die Hände einer Uhrenoberfläche bewegen kann, um eine Zeit auszuwählen.combined : Bietet sowohl textual als auch graphical Schnittstellen.Beispiel Verwendung:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Lassen Sie den Benutzer eine Farbe über den nativen MacOS -Farbwähler auswählen.
Sie können auswählen, in welchem Modus die Auswahl mit dem ColorPickerMode Enum starten, um zu starten. Die Standardeinstellung ist ColorPickerMode.wheel
Dieses Widget funktioniert nicht auf anderen Plattformen als MacOS!
Beispiel Verwendung:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
