macos_ui
Version 2.1.0
วิดเจ็ต Flutter และธีมที่ใช้ภาษาการออกแบบ MacOS ปัจจุบัน
ตรวจสอบ แกลเลอรี่วิดเจ็ตแบบอินเทอร์แอคทีฟ ของเราทางออนไลน์ที่ https://macosui.github.io/macos_ui/#/
คำแนะนำ codelabs และเอกสารอื่น ๆ สามารถดูได้ที่ https://macosui.dev
macos_ui ได้รับการพัฒนากับช่องทาง stable ของ Flutter เพื่อให้แน่ใจว่าประสบการณ์การพัฒนาที่ราบรื่นด้วย macos_ui คุณควรสร้างแอปพลิเคชันของคุณในช่องทาง stable ของ Flutter
pub.dev แสดงให้เห็นว่า macos_ui รองรับ macOS เท่านั้น นี่เป็นเพราะ macos_ui เรียกรหัสดั้งเดิมบางตัวดังนั้นจึงระบุ MacOS เป็นแพลตฟอร์มปลั๊กอินในไฟล์ pubspec.yaml
macos_ui ในทางเทคนิค จะทำงานบนแพลตฟอร์มใด ๆ ที่ Flutter รองรับ แต่คุณจะได้รับผลลัพธ์ที่ดีที่สุดใน MacOS ไม่ รับประกันการสนับสนุนแพลตฟอร์มที่ไม่ใช่ MACOS
คุณสมบัติของ macos_ui ที่จะ ไม่ ทำงานบนแพลตฟอร์มอื่นนอกเหนือจาก macOS เนื่องจากการโทรรหัสเนทีฟคือ:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellเนื่องจากในเวลานี้ Flutter ไม่อนุญาตให้องค์ประกอบ UI ล้นขอบเขตของหน้าต่างป๊อปอัปจึงถูก จำกัด ไว้ที่พื้นที่ว่าง
ดังนั้นหากคุณใช้วิดเจ็ตที่สร้างป๊อปอัพในแถบเครื่องมือของคุณเช่น ToolBarPopupButton คุณควรหลีกเลี่ยงการอนุญาตให้หน้าต่างแอปพลิเคชันของคุณปรับขนาดต่ำกว่าความสูงของป๊อปอัพที่สูงที่สุดของคุณ
macos_ui ยินดีต้อนรับผลงาน! โปรดดู CONTRIBUTING.md เพิ่มเติมสำหรับข้อมูลเพิ่มเติม
MacosWindow เป็นเฟรมพื้นฐานสำหรับเค้าโครงสไตล์ MacOS
รองรับ Sidebar ทางด้านซ้ายเป็น TitleBar เสริมที่ด้านบนและส่วนที่เหลือของหน้าต่างจะเต็มไปด้วย MacosScaffold
ขอบเขตสำหรับ MacosWindow นั้นจัดทำโดย MacosWindowScope แถบด้านข้างสามารถสลับด้วย MacosWindowScope.of(context).toggleSidebar() โปรดทราบ ว่าคุณต้องห่อ MacosScaffold ของคุณในวิดเจ็ต Builder เพื่อให้สิ่งนี้ทำงานได้อย่างถูกต้อง
แถบด้านข้างเปิดใช้งานการนำทางของแอพและให้การเข้าถึงคอลเลกชันของเนื้อหาระดับบนสุดอย่างรวดเร็วในแอพของคุณ
แถบด้านข้างอาจถูกวางไว้ที่ด้านซ้ายหรือขวาของแอปของคุณ ในการวางแถบด้านข้างทางด้านซ้ายให้ใช้คุณสมบัติ MacosWindow.sidebar ในการวางแถบด้านข้างทางด้านขวาให้ใช้คุณสมบัติ MacosWindow.endSidebar
ตัวอย่างการใช้งาน:
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' ),
);
},
),
), MacosScaffold เป็นสิ่งที่คุณอาจเรียกว่า "หน้า"
นั่งร้านมีคุณสมบัติ toolbar และทรัพย์สิน children children ยอมรับวิดเจ็ต ContentArea และวิดเจ็ต ResizablePane หลายตัว หากต้องการจับการนำทางหรือเส้นทางด้านล่างนั่งร้านให้พิจารณาห่อ MacosScaffold ใน CupertinoTabView ด้วยการทำเช่นนั้นการนำทางภายใน MacosScaffold จะปรากฏขึ้นภายในพื้นที่ MacosScaffold แทนที่จะครอบคลุมทั้งหน้าต่าง หากต้องการผลักดันเส้นทางนอก MacosScaffold ที่ห่อหุ้มด้วย CupertinoTabView ให้ใช้รูท Navigator Navigator.of(context, rootNavigator: true)
ดูเอกสารสำหรับการปรับแต่งและตัวอย่างแถบ ToolBar
รูปลักษณ์ใหม่สำหรับแอพ MacOS ได้รับการแนะนำใน Big Sur (MacOS 11) เพื่อให้ตรงกับที่ดูในแอพพลิเคชั่น Flutter ของคุณ MacOS_UI อาศัย MacOS_WINDOW_UTILS ซึ่งต้องใช้เป้าหมายการปรับใช้ MACOS ขั้นต่ำที่ 10.14.6 ดังนั้นตรวจสอบให้แน่ใจว่าได้เปิดโฟลเดอร์ macos/Runner.xcworkspace ของโครงการของคุณโดยใช้ XCode และค้นหา Runner.xcodeproj ไปที่ Info > Deployment Target และตั้ง macOS Deployment Target เป็น 10.14.6 หรือสูงกว่า จากนั้นเปิด Podfile ของโครงการของคุณ (หากไม่ปรากฏใน XCode คุณสามารถค้นหาได้ในไดเรกทอรี macos ของโครงการผ่านรหัส VS) และตั้งค่าเวอร์ชันการปรับใช้ขั้นต่ำในบรรทัดแรกเป็น 10.14.6 หรือสูงกว่า:
platform :osx , '10.14.6' คุณอาจต้องเปิด Runner.xcodeproj ของแอป XcodeProj ใน XCode และตั้งค่าเวอร์ชันการปรับใช้ขั้นต่ำที่นั่น
ตอนนี้กำหนดค่าหน้าต่างของคุณภายใน main() ของคุณดังนี้:
/// 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 ());
} โปรดทราบว่าหากคุณใช้แถบชื่อเรื่อง ( TitleBar ) ใน MacosWindow ของคุณคุณควรตั้งค่า toolbarStyle ของหน้าต่างของคุณเป็น NSWindowToolbarStyle.expanded
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} ในกรณีอื่น ๆ คุณควรเก็บไว้เป็น NSWindowToolbarStyle.unified
สร้างแถบเครื่องมือใน MacosScaffold แถบเครื่องมือจะปรากฏอยู่ด้านล่างแถบชื่อเรื่อง (ถ้ามี) ของแอป MacOS หรือรวมเข้ากับมันโดยใช้คุณสมบัติ title
แถบเครื่องมือให้การเข้าถึงคำสั่งและคุณสมบัติที่ใช้บ่อย (รายการแถบเครื่องมือ) ที่สะดวก เส้นทางที่แตกต่างกันของแอปของคุณอาจมีแถบเครื่องมือที่แตกต่างกัน
รายการแถบเครื่องมือ ได้แก่ ToolBarIconButton , ToolBarPulldownButton และเครื่องมือ ToolBarSpacer และควรให้บริการผ่านคุณสมบัติ items ควรให้การดำเนินการของแถบเครื่องมือทุกรายการเป็นคำสั่งแถบเมนูของแอปของคุณ
แถบเครื่องมือดูดีที่สุดและง่ายที่สุดที่จะเข้าใจเมื่อมีองค์ประกอบประเภทเดียวกัน (ดังนั้นใช้ป้ายกำกับสำหรับทุกรายการแถบเครื่องมือหรือไม่)
คุณสามารถใช้วิดเจ็ต ToolBarSpacer เพื่อตั้งค่าการจัดกลุ่มของการกระทำแถบเครื่องมือที่แตกต่างกัน
ตัวอย่างแถบเครื่องมือจะเป็น:
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..." ),
),
],
),
]
),สิ่งนี้สร้างแถบเครื่องมือง่าย ๆ นี้:
ตัวอย่างแถบเครื่องมืออื่น ๆ :
นอกจากนี้คุณยังสามารถสร้าง CustomToolbarItem ของคุณเองเพื่อรวมวิดเจ็ตทุกประเภทในแถบเครื่องมือ:
// 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 เป็นตัวแปรของ ToolBar มาตรฐานโดยมีความแตกต่างที่สำคัญคือ (ตามชื่อหมายถึง) มันเข้ากันได้กับวิดเจ็ตที่เลื่อนได้เช่น CustomScrollView และ NestedScrollView มีคุณสมบัติเพิ่มเติมอีกสามประการใน SliverToolBar :
pinned ซึ่งกำหนดว่าแถบเครื่องมือควรมองเห็นได้หรือไม่ขณะเลื่อนfloating ซึ่งกำหนดว่าแถบเครื่องมือควรมองเห็นได้ทันทีที่การใช้งานเริ่มเลื่อนขึ้นไปข้างบนopacity ซึ่งจัดการเอฟเฟกต์การโปร่งแสงของแถบเครื่องมือวิดเจ็ตนี้ช่วยให้นักพัฒนาสามารถบรรลุพฤติกรรมแถบเครื่องมือที่เห็นได้ใน App Store ของ Apple
ตัวอย่างการใช้งาน:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); วิดเจ็ตที่มีจุดมุ่งหมายเพื่อประมาณวิดเจ็ต ListTile ที่พบในห้องสมุดวัสดุของ Flutter
ตัวอย่างการใช้งาน:
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,
),
),
), อินเทอร์เฟซหลาย ๆ ที่แสดงทีละหน้า ต้องใช้ใน StatefulWidget
คุณสามารถควบคุมตำแหน่งของแท็บโดยใช้คุณสมบัติ position
การใช้งาน:
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' ),
),
],
),
MacosIcon นั้นเหมือนกับ Icon ปกติในทุก ๆ ด้านด้วยข้อยกเว้นหนึ่งข้อ - มันเคารพ MacosTheme ใช้ในลักษณะเดียวกับที่คุณจะใช้ไอคอนปกติ:
MacosIcon (
CupertinoIcons .add,
// color: CupertinoColors.activeBlue.color,
// size: 20,
),ช่องทำเครื่องหมายเป็นปุ่มประเภทหนึ่งที่ให้ผู้ใช้เลือกระหว่างสองสถานะตรงข้ามการกระทำหรือค่า ช่องทำเครื่องหมายที่เลือกจะถูกพิจารณาเมื่อมีเครื่องหมายถูกและปิดเมื่อว่างเปล่า ช่องทำเครื่องหมายมักจะตามมาด้วยชื่อเรื่องเว้นแต่จะปรากฏในรายการตรวจสอบ เรียนรู้เพิ่มเติม
| ไม่ถูกตรวจสอบ | ตรวจสอบแล้ว | ผสมกัน |
|---|---|---|
นี่คือตัวอย่างของวิธีการสร้างช่องทำเครื่องหมายพื้นฐาน:
bool selected = false ;
MacosCheckbox (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
) หากต้องการทำเครื่องหมายในสถานะ mixed ให้ตั้ง value เป็น null
ปุ่มช่วยเหลือจะปรากฏขึ้นภายในมุมมองและเปิดเอกสารช่วยเหลือเฉพาะแอพเมื่อคลิก ปุ่มความช่วยเหลือทั้งหมดเป็นวงกลมปุ่มขนาดที่สม่ำเสมอซึ่งมีไอคอนเครื่องหมายคำถาม เรียนรู้เพิ่มเติม
นี่คือตัวอย่างของวิธีการสร้างปุ่มช่วยเหลือ:
HelpButton (
onPressed : () {
print ( 'pressed help button' ),
},
) คุณสามารถปรับแต่งการปรากฏตัวของปุ่มช่วยเหลือและพฤติกรรมโดยใช้ HelpButtonTheme แต่ไม่แนะนำโดย Apple ให้เปลี่ยนรูปลักษณ์ของปุ่ม Help
ปุ่มตัวเลือกเป็นปุ่มวงกลมขนาดเล็กตามด้วยชื่อ โดยทั่วไปจะนำเสนอในกลุ่มสองถึงห้าปุ่มตัวเลือกจะให้ชุดของตัวเลือกที่เกี่ยวข้อง แต่ไม่เหมือนกัน สถานะของปุ่มตัวเลือกเปิดอยู่ (วงกลมที่เต็มไป) หรือปิด (วงกลมว่าง) เรียนรู้เพิ่มเติม
นี่คือตัวอย่างของวิธีการสร้างปุ่มตัวเลือกพื้นฐาน:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),ปุ่มแบบเลื่อนลง (มักเรียกว่าเมนูแบบเลื่อนลง) เป็นปุ่มป๊อปอัพประเภทหนึ่งที่เมื่อคลิกแสดงเมนูที่มีรายการตัวเลือก เมนูปรากฏด้านล่างปุ่ม เมื่อเมนูปรากฏบนหน้าจอจะยังคงเปิดอยู่จนกว่าผู้ใช้จะเลือกรายการเมนูคลิกด้านนอกของเมนูสลับไปยังแอพอื่นหรือออกจากแอพ หรือจนกว่าระบบจะแสดงการแจ้งเตือน เรียนรู้เพิ่มเติม
ใช้ปุ่มแบบเลื่อนลงเพื่อแสดงรายการคำสั่ง ปุ่มแบบเลื่อนลงสามารถแสดง title หรือ icon เพื่ออธิบายเนื้อหาของเมนูของปุ่ม หากคุณใช้ไอคอนตรวจสอบให้แน่ใจว่าสื่อสารวัตถุประสงค์ของปุ่มได้อย่างชัดเจน
หาก items เป็นโมฆะปุ่มจะถูกปิดใช้งาน (สีเทาออก)
จะต้องจัดทำ title หรือ icon เพื่อแสดงเป็นชื่อของปุ่มดึงลง แต่ไม่ใช่ทั้งคู่ในเวลาเดียวกัน
เมนูยังสามารถนำทางด้วยปุ่มขึ้น/ลงและการกระทำที่เลือกด้วยปุ่ม Return
นอกจากนี้ยังสามารถปรากฏในแถบเครื่องมือผ่านวิดเจ็ต ToolBarPulldownButton
| ธีมมืด | ธีมแสง |
|---|---|
นี่คือตัวอย่างของวิธีการสร้างปุ่มดึงลงพื้นฐาน:
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" ),
),
],
),ปุ่มป๊อปอัพ (มักเรียกว่าเมนูป๊อปอัพ) เป็นปุ่มประเภทที่เมื่อคลิกแสดงเมนูที่มีรายการตัวเลือกพิเศษร่วมกัน เมนูปรากฏขึ้นที่ด้านบนของปุ่ม เช่นเดียวกับเมนูประเภทอื่น ๆ เมนูของปุ่มป๊อปอัพอาจรวมถึงตัวคั่นและสัญลักษณ์เช่น CheckMarks หลังจากเปิดเผยเมนูแล้วจะยังคงเปิดอยู่จนกว่าผู้ใช้จะเลือกรายการเมนูคลิกด้านนอกของเมนูสลับไปยังแอพอื่นหรือออกจากแอพ หรือจนกว่าระบบจะแสดงการแจ้งเตือน เรียนรู้เพิ่มเติม
ประเภท T ของ MacosPopupButton เป็นประเภทของค่าที่รายการเมนูป๊อปอัพแต่ละรายการแสดงถึง รายการทั้งหมดในเมนูที่กำหนดจะต้องแสดงค่าที่มีประเภทที่สอดคล้องกัน โดยทั่วไปจะใช้ enum MacosPopupMenuItem แต่ละรายการจะต้องมีความเชี่ยวชาญด้วยอาร์กิวเมนต์ประเภทเดียวกัน
การโทรกลับ onChanged ควรอัปเดตตัวแปรสถานะที่กำหนดค่าเมนูป๊อปอัพ นอกจากนี้ยังควรโทรหา State.setState เพื่อสร้างปุ่มป๊อปอัพใหม่ด้วยค่าใหม่
เมื่อมีรายการเมนูที่ไม่สามารถแสดงได้ภายในข้อ จำกัด เมนูที่มีอยู่จะมีการแสดงแคร์ที่ด้านบนหรือด้านล่างของเมนูเปิดเพื่อส่งสัญญาณว่ามีรายการที่ไม่สามารถมองเห็นได้ในปัจจุบัน
เมนูยังสามารถนำทางด้วยปุ่มขึ้น/ลงและรายการที่เลือกด้วยคีย์ Return
| ธีมมืด | ธีมแสง |
|---|---|
นี่คือตัวอย่างของวิธีการสร้างปุ่มป๊อปอัพพื้นฐาน:
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 (),
),ปุ่มกดเป็นประเภทปุ่มมาตรฐานใน macOS ปุ่มกดมีข้อความ - ไม่ใช่ไอคอน - และมักจะเปิดหน้าต่างไดอะล็อกหรือแอพแยกต่างหากเพื่อให้ผู้ใช้สามารถทำงานให้เสร็จสมบูรณ์ เรียนรู้เพิ่มเติม
| ธีมมืด | ธีมแสง |
|---|---|
หมายเหตุ ปุ่มกดเนทีฟสามารถจัดรูปแบบเป็นข้อความเท่านั้นข้อความที่มีไอคอนหรือไอคอนเท่านั้น ปัจจุบันรองรับปุ่มกดแบบข้อความเท่านั้น ในการสร้างปุ่มไอคอนอย่างเดียวให้ใช้วิดเจ็ต MacosIconButton
นี่คือตัวอย่างของวิธีการสร้างปุ่มกดพื้นฐาน:
PushButton (
child : Text ( 'button' ),
controlSize : ControlSize .regular,
onPressed : () {
print ( 'button pressed' );
},
),สวิตช์ (หรือที่เรียกว่าสลับ) เป็นตัวควบคุมที่เสนอตัวเลือกไบนารีระหว่างสองสถานะพิเศษร่วมกัน - เปิดและปิด สวิตช์แสดงให้เห็นว่ามันเปิดเมื่อมองเห็นสีสำเนียงและปิดเมื่อสวิตช์ปรากฏไม่มีสี
ContolSize enum สามารถส่งผ่านไปยังคุณสมบัติ size เพื่อควบคุมขนาดของสวิตช์ MacosSwitch รองรับขนาดการควบคุมต่อไปนี้:
minismallregular| ปิด | บน |
|---|---|
นี่คือตัวอย่างของวิธีการสร้างสวิตช์สลับพื้นฐาน:
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),เรียนรู้เพิ่มเติมเกี่ยวกับสวิตช์ที่นี่
แสดงแท็บการนำทางอย่างน้อยหนึ่งแท็กในกลุ่มแนวนอนเดียว ใช้โดย MacosTabView เพื่อนำทางระหว่างแท็บที่แตกต่างกันของแถบแท็บ
การใช้งานทั่วไปของวิดเจ็ตนี้คือโดย MacosTabView เพื่อควบคุมการนำทางของเด็ก ๆ คุณไม่จำเป็นต้องระบุ MacosSegmentedControl ด้วย MacosTabView ของคุณเนื่องจากสร้างโดยวิดเจ็ตนั้น
การใช้งาน:
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 : () {},
),
),
);การใช้งาน:
showMacosSheet (
context : context,
builder : (_) => const MacosuiSheet (),
);ฟิลด์ข้อความเป็นพื้นที่สี่เหลี่ยมผืนผ้าที่ผู้ใช้ป้อนหรือแก้ไขหนึ่งบรรทัดหรือมากกว่าของข้อความ ฟิลด์ข้อความสามารถมีข้อความธรรมดาหรือสไตล์
นี่คือตัวอย่างของวิธีการสร้างฟิลด์ข้อความพื้นฐาน:
MacosTextField (
placeholder : 'Type some text here' ,
)ฟิลด์การค้นหาเป็นรูปแบบของฟิลด์ข้อความที่ได้รับการปรับให้เหมาะสมสำหรับการค้นหาแบบข้อความในคอลเลกชันของค่าขนาดใหญ่
เมื่อผู้ใช้เริ่มพิมพ์ลงในฟิลด์ค้นหารายการผลลัพธ์ที่เลือกได้จะปรากฏขึ้นในฟิลด์ซ้อนทับด้านล่าง (หรือสูงกว่า) ฟิลด์
| ธีมมืด | ธีมแสง |
|---|---|
นี่คือตัวอย่างของวิธีการสร้างช่องค้นหา:
MacosSearchField (
placeholder : 'Search for a country...' ,
results : countries. map ((e) => SearchResultItem (e)). toList (),
onResultSelected : (resultItem) {
debugPrint (resultItem.searchKey);
},
) ตรวจสอบ examples/fields_page สำหรับตัวอย่างเพิ่มเติม
ป้ายกำกับเป็นคำอธิบายสั้น ๆ ว่าองค์ประกอบบนหน้าจอทำอะไร
คำแนะนำเครื่องมืออธิบายวิธีการใช้การควบคุมโดยไม่เปลี่ยนโฟกัสของผู้คนออกไปจากอินเทอร์เฟซหลัก แท็กวิธีใช้จะปรากฏขึ้นเมื่อผู้ใช้วางตำแหน่งตัวชี้เหนือตัวควบคุมเป็นเวลาไม่กี่วินาที คำแนะนำเครื่องมือยังคงมองเห็นได้เป็นเวลา 10 วินาทีหรือจนกว่าตัวชี้จะย้ายออกจากการควบคุม
| ธีมมืด | ธีมแสง |
|---|---|
ในการสร้างคำแนะนำเครื่องมือให้ห่อวิดเจ็ตใด ๆ บน MacosTooltip :
MacosTooltip (
message : 'This is a tooltip' ,
child : Text ( 'Hover or long press to show a tooltip' ),
), คุณสามารถปรับแต่งคำแนะนำเครื่องมือตามที่คุณต้องการได้โดยการปรับแต่ง TooltipTheme ของธีม คำแนะนำเครื่องมือจะปรับให้เข้ากับสภาพแวดล้อมโดยอัตโนมัติตอบสนองต่อเหตุการณ์การสัมผัสและตัวชี้ หากต้องการใช้คำแนะนำเครื่องมือพร้อมรายการแถบเครื่องมือให้มีคุณสมบัติ tooltipMessage
อย่าทำให้ผู้คนนั่งจ้องมองที่หน้าจอคงที่รอให้แอปของคุณโหลดเนื้อหาหรือดำเนินการประมวลผลข้อมูลที่ยาวนาน ใช้ตัวชี้วัดความคืบหน้าเพื่อให้ผู้คนรู้ว่าแอปของคุณไม่ได้หยุดชะงักและทำให้พวกเขาทราบว่าพวกเขาจะรอนานแค่ไหน
ตัวบ่งชี้ความคืบหน้ามีสองรูปแบบที่แตกต่างกัน:
ผู้คนไม่ได้มีปฏิสัมพันธ์กับตัวชี้วัดความคืบหน้า อย่างไรก็ตามพวกเขามักจะมาพร้อมกับปุ่มเพื่อยกเลิกการดำเนินการที่เกี่ยวข้อง เรียนรู้เพิ่มเติม
ProgressCircle สามารถกำหนดหรือไม่แน่นอนได้
| กำหนดวงกลมความคืบหน้า | วงกลมความคืบหน้าไม่แน่นอน |
|---|---|
นี่คือตัวอย่างของวิธีการสร้างวงกลมความคืบหน้าแบบไม่แน่นอน:
ProgressCircle (
value : null ,
), คุณสามารถระบุค่าที่ไม่ใช่ค่าใช้จ่ายเพื่อให้ value ความคืบหน้าของวงกลมกำหนด
ProgressBar สามารถกำหนดได้เท่านั้น
นี่คือตัวอย่างของวิธีการสร้างแถบความคืบหน้าแบบกำหนด:
ProgressBar (
value : 30 ,
)ตัวบ่งชี้ระดับแสดงกราฟิกของค่าเฉพาะภายในช่วงของค่าตัวเลข มันคล้ายกับตัวเลื่อนตามวัตถุประสงค์ แต่มีภาพมากขึ้นและไม่มีการควบคุมที่แตกต่างกันสำหรับการเลือกค่า - การคลิกและลากข้ามตัวบ่งชี้ระดับตัวเองเพื่อเลือกค่าได้รับการสนับสนุนอย่างไรก็ตาม ตัวบ่งชี้ระดับยังสามารถรวมเครื่องหมายเห็บทำให้ผู้ใช้สามารถระบุค่าเฉพาะในช่วงได้ง่าย มีรูปแบบตัวบ่งชี้ระดับที่แตกต่างกันสามแบบแต่ละรูปแบบมีลักษณะที่แตกต่างกันสำหรับการสื่อสารความสามารถการจัดอันดับและความเกี่ยวข้อง
ตัวบ่งชี้ความจุแสดงระดับปัจจุบันที่สัมพันธ์กับความสามารถที่ จำกัด ตัวบ่งชี้ความจุมักจะใช้เมื่อสื่อสารปัจจัยเช่นดิสก์และการใช้แบตเตอรี่ เรียนรู้เพิ่มเติม
นี่คือตัวอย่างของวิธีการสร้างตัวบ่งชี้ความจุต่อเนื่องแบบโต้ตอบ:
double value = 30 ;
CapacityIndicator (
value : value,
discrete : false ,
onChanged : (v) {
setState (() => value = v);
},
), คุณสามารถตั้งค่า discrete เป็น true เพื่อให้เป็นตัวบ่งชี้ความสามารถที่ไม่ต่อเนื่อง
ตัวเลื่อนเป็นตัวควบคุมที่ให้ผู้คนเลือกค่าจากช่วงต่อเนื่องหรือไม่ต่อเนื่องโดยการเลื่อนนิ้วหัวแม่มือตัวเลื่อน
| ต่อเนื่อง | ไม่ต่อเนื่อง |
|---|---|
| ตัวเลื่อนแนวนอนที่สามารถเลือกค่าต่อเนื่องระหว่างนาทีและสูงสุดได้ | ตัวเลื่อนแนวนอนที่สามารถเลือกค่าที่ไม่ต่อเนื่องระหว่างนาทีและสูงสุดเท่านั้น เครื่องหมายเห็บมักจะแสดงเพื่อให้บริบท |
นี่คือตัวอย่างของวิธีการสร้างตัวเลื่อนต่อเนื่องแบบโต้ตอบ:
double value = 0.5 ;
MacosSlider (
value : value,
onChanged : (v) {
setState (() => value = v);
},
),ตัวบ่งชี้การจัดอันดับใช้ชุดสัญลักษณ์กราฟิกที่จัดเรียงตามแนวนอนเพื่อสื่อสารระดับการจัดอันดับ สัญลักษณ์เริ่มต้นคือดาว
ตัวบ่งชี้การจัดอันดับไม่แสดงสัญลักษณ์บางส่วน - ค่าถูกปัดเศษเพื่อแสดงสัญลักษณ์ที่สมบูรณ์เท่านั้น ภายในตัวบ่งชี้การจัดอันดับสัญลักษณ์มักจะอยู่ห่างกันและไม่ขยายหรือหดตัวเพื่อให้พอดีกับการควบคุม เรียนรู้เพิ่มเติม
นี่คือตัวอย่างของวิธีการสร้างตัวบ่งชี้การจัดอันดับแบบโต้ตอบ:
double value = 3 ;
RatingIndicator (
amount : 5 ,
value : value,
onChanged : (v) {
setState (() => value = v);
}
)ให้ผู้ใช้เลือกวันที่
MacosDatePickers มีสามรูปแบบ:
textual : ตัวเลือกวันที่ข้อความเท่านั้นที่ผู้ใช้จะต้องเลือกวันเดือนหรือปีและใช้ปุ่ม Caret-Control เพื่อเปลี่ยนค่า สิ่งนี้มีประโยชน์เมื่อพื้นที่ในแอปของคุณถูก จำกัดgraphical : ตัวเลือกวันที่ภาพที่ผู้ใช้สามารถนำทางผ่านอินเตอร์เฟสเหมือนปฏิทินเพื่อเลือกวันที่combined : ให้ทั้งอินเทอร์เฟซ textual และ graphical การแปลเวลาของตัวเลือกเวลาได้รับการสนับสนุนโดยพารามิเตอร์ weekdayAbbreviations และพารามิเตอร์ monthAbbreviations (แทนที่จะเป็น localizations.narrowWeekdays() เพื่อให้ตรงกับข้อมูลจำเพาะของ Apple)
weekdayAbbreviations ควรเป็นรายการ 7 สตริงหนึ่งรายการสำหรับแต่ละวันของสัปดาห์เริ่มต้นด้วยวันอาทิตย์monthAbbreviations ควรเป็นรายการ 12 สตริงหนึ่งรายการสำหรับแต่ละเดือนของปีเริ่มต้นด้วยเดือนมกราคม นอกจากนี้คุณยังสามารถกำหนด dateFormat เพื่อเปลี่ยนวิธีการแสดงวันที่ในอินเทอร์เฟซข้อความ ต้องใช้สตริงโทเค็น (ตัวพิมพ์ใหญ่) และแทนที่ด้วยค่าที่สอดคล้องกัน รองรับโทเค็นต่อไปนี้:
D : Day of the Month (1-31)DD : Day of the Month (01-31)M : เดือนของปี (1-12)MM : เดือนของปี (01-12)YYYY : ปี (0000-9999)/ , - . ) รูปแบบเริ่มต้นคือ M/D/YYYY
ตัวอย่างการใช้งาน:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),ให้ผู้ใช้เลือกเวลา
MacosTimePickers มีสามรูปแบบ:
textual : ตัวเลือกเวลาข้อความเท่านั้นที่ผู้ใช้จะต้องเลือกชั่วโมงหรือนาทีและใช้ปุ่ม caret-control เพื่อเปลี่ยนค่า สิ่งนี้มีประโยชน์เมื่อพื้นที่ในแอปของคุณถูก จำกัดgraphical : ตัวเลือกเวลาภาพที่ผู้ใช้สามารถขยับมือของอินเทอร์เฟซเหมือนนาฬิกาเพื่อเลือกเวลาcombined : ให้ทั้งอินเทอร์เฟซ textual และ graphicalตัวอย่างการใช้งาน:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),ให้ผู้ใช้เลือกสีผ่านตัวเลือกสี MacOS ดั้งเดิม
คุณสามารถเลือกโหมดที่จะเปิดตัวเลือกโดยใช้ enum ColorPickerMode ค่าเริ่มต้นคือ ColorPickerMode.wheel
วิดเจ็ตนี้จะไม่ทำงานบนแพลตฟอร์มอื่นนอกเหนือจาก MacOS!
ตัวอย่างการใช้งาน:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
