macos_ui
Version 2.1.0
Flut
https://macosui.github.io/macos_ui/#/에서 온라인으로 대화 형 위젯 갤러리를 확인하십시오.
가이드, 코드 랩 및 기타 문서는 https://macosui.dev에서 찾을 수 있습니다.
macos_ui 는 Flutter의 stable 채널에 대해 개발되었습니다. macos_ui 에 대한 원활한 개발 경험을 보장하려면 Flutter의 stable 채널에서 응용 프로그램을 구축해야합니다.
pub.dev는 macos_ui MacOS 만 지원한다는 것을 보여줍니다. macos_ui 일부 기본 코드를 호출하므로 MacOS를 pubspec.yaml 파일의 플러그인 플랫폼으로 지정하기 때문입니다.
macos_ui 기술적으로 Flutter가 지원하는 모든 플랫폼에서 작동 하지만 MacOS에서 최상의 결과를 얻을 수 있습니다 . 비 마코스 플랫폼 지원은 보장되지 않습니다 .
기본 코드를 호출하여 MacOS 이외의 플랫폼에서 작동 하지 않는 macos_ui 의 기능은 다음과 같습니다.
macos_window_utils 와 관련된 모든 것MacosColors.controlAccentColor() 함수MacosColorWell 위젯이 시점에서 Flut
따라서 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 위젯을 수용합니다. 스캐 폴드 아래의 내비게이션 또는 경로를 잡으려면 CupertinoTabView 에 MacosScaffold 포장하는 것을 고려하십시오. 그렇게함으로써, MacosScaffold 내부의 내비게이션은 전체 창을 덮는 대신 MacosScaffold 영역 안에 표시됩니다. CupertinoTabView 로 감싸는 MacosScaffold 외부의 경로를 밀려면 루트 네비게이터 Navigator.of(context, rootNavigator: true) 사용하십시오.
사용자 정의 및 ToolBar 예제에 대한 설명서를 참조하십시오.
MacOS 앱에 대한 새로운 모습이 Big Sur (MACOS 11)에서 소개되었습니다. Flutter App의 모습에 맞추기 위해 MacOS_UI는 MacOS_Window_utils에 의존합니다. 여기에는 최소 MACOS 배포 대상 10.14.6이 필요합니다. 따라서 Xcode를 사용하여 프로젝트의 macos/Runner.xcworkspace 폴더를 열고 Runner.xcodeproj 를 검색하십시오. Info > Deployment Target 으로 이동하여 macOS Deployment Target 10.14.6 이상으로 설정하십시오. 그런 다음 프로젝트의 Podfile 열고 (Xcode에 표시되지 않으면 VS 코드를 통해 프로젝트의 macos 디렉토리에서 찾을 수 있음) 첫 번째 줄에서 최소 배포 버전을 10.14.6 이상으로 설정하십시오.
platform :osx , '10.14.6' Xcode에서 앱의 Runner.xcodeproj 열고 최소 배포 버전을 설정해야 할 수도 있습니다.
이제 다음과 같이 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 ());
} MacosWindow 에서 Title Bar ( TitleBar )를 사용하는 경우 Window의 toolbarStyle NSWindowToolbarStyle.expanded 로 설정하여 닫기를 올바르게 정렬하여 최소화 된 줌 창 버튼을 설정해야합니다.
Future < void > _configureMacosWindowUtils () async {
const config = MacosWindowUtilsConfig (
toolbarStyle : NSWindowToolbarStyle .expanded,
);
await config. apply ();
} 다른 경우에는 NSWindowToolbarStyle.unified 으로 유지해야합니다.
MacosScaffold 에 도구 모음을 만듭니다. 도구 모음은 title 속성을 사용하여 MacOS 앱의 제목 표시 줄 (현재) 아래에 표시되거나 이와 통합됩니다.
도구 모음은 자주 사용되는 명령 및 기능 (도구 모음 항목)에 편리하게 액세스 할 수 있습니다. 앱의 다른 경로마다 다른 도구 모음이있을 수 있습니다.
도구 모음 항목에는 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이 위젯을 통해 개발자는 Apple의 App Store에서 볼 수있는 도구 모음 동작을 달성 할 수 있습니다.
샘플 사용 :
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Flutter의 재료 라이브러리에서 발견 된 ListTile 위젯을 근사화하는 위젯.
샘플 사용 :
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은 도움말 버튼의 모양을 변경하는 것이 좋습니다.
라디오 버튼은 작고 원형 버튼과 제목입니다. 일반적으로 2 ~ 5 개의 그룹으로 표시되는 라디오 버튼은 사용자에게 관련이지만 상호 배타적 인 선택 세트를 제공합니다. 라디오 버튼의 상태는 (채워진 원) 또는 꺼짐 (빈 원)입니다. 자세히 알아보십시오
기본 라디오 버튼을 만드는 방법의 예는 다음과 같습니다.
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),풀다운 버튼 (종종 풀다운 메뉴라고 함)은 클릭하면 선택 목록이 포함 된 메뉴를 표시하는 팝업 버튼 유형입니다. 메뉴는 버튼 아래에 나타납니다. 메뉴가 화면에 표시되면 사용자가 메뉴 항목을 선택하거나 메뉴 외부를 클릭하거나 다른 앱으로 전환하거나 앱을 종료 할 때까지 열려 있습니다. 또는 시스템에 경고가 표시 될 때까지. 자세히 알아보십시오
풀다운 버튼을 사용하여 명령 목록을 제시하십시오. 풀다운 버튼은 버튼 메뉴의 내용을 설명하기 위해 title 이나 icon 표시 할 수 있습니다. 아이콘을 사용하는 경우 버튼의 목적을 명확하게 전달하십시오.
items 이 null이면 버튼이 비활성화됩니다 (회색).
풀다운 버튼의 제목으로 표시하려면 title 이나 icon 제공해야하지만 동시에 둘 다해서는 안됩니다.
메뉴는 위/다운 키와 리턴 키로 선택한 작업으로 탐색 할 수도 있습니다.
도구 모음에 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" ),
),
],
),팝업 버튼 (종종 팝업 메뉴라고 함)은 클릭 할 때 상호 배타적 인 선택 목록이 포함 된 메뉴를 표시하는 버튼 유형입니다. 메뉴가 버튼 위에 나타납니다. 다른 유형의 메뉴와 마찬가지로 팝업 버튼의 메뉴에는 분리기와 체크 마크와 같은 기호가 포함될 수 있습니다. 메뉴가 공개되면 사용자가 메뉴 항목을 선택하거나 메뉴 외부를 클릭하거나 다른 앱으로 전환하거나 앱을 종료 할 때까지 열려 있습니다. 또는 시스템에 경고가 표시 될 때까지. 자세히 알아보십시오
MacosPopupButton 의 유형 T 각 팝업 메뉴 항목이 나타내는 값의 유형입니다. 주어진 메뉴의 모든 항목은 일관된 유형의 값을 나타내야합니다. 일반적으로 enum 사용됩니다. 항목의 각 MacosPopupMenuItem 동일한 유형의 인수와 함께 전문화되어야합니다.
onChanged 콜백은 팝업 메뉴의 값을 정의하는 상태 변수를 업데이트해야합니다. 또한 State.setState 호출하여 새 값으로 팝업 버튼을 재구성해야합니다.
사용 가능한 메뉴 제약 조건 내에 표시 할 수없는 메뉴 항목이있는 경우, 열린 메뉴의 상단 또는 하단에 캐럿이 표시되어 현재 보이지 않는 항목이 있음을 나타냅니다.
메뉴는 위/다운 키와 리턴 키로 선택한 항목으로 탐색 할 수도 있습니다.
| 어두운 테마 | 가벼운 테마 |
|---|---|
기본 팝업 버튼을 만드는 방법의 예는 다음과 같습니다.
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 열거는 스위치의 크기를 제어하기 위해 size 특성으로 전달 될 수 있습니다. MacosSwitch 다음과 같은 제어 크기를 지원합니다.
minismallregular| 끄다 | ~에 |
|---|---|
다음은 기본 토글 스위치를 만드는 방법의 예입니다.
bool switchValue = false ;
MacosSwitch (
value : switchValue,
onChanged : (value) {
setState (() => switchValue = value);
},
),스위치에 대해 자세히 알아보십시오.
단일 수평 그룹에 하나 이상의 탐색 탭을 표시합니다. MacosTabView 에서 사용하여 탭 막대의 다른 탭을 탐색합니다.
이 위젯의 일반적인 사용은 MacosTabView 에 의한 것입니다. 해당 위젯에 의해 구축되었으므로 MacosTabView 사용하여 MacosSegmentedControl 지정할 필요가 없습니다.
용법:
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 ,
)레벨 표시기는 숫자 값 범위 내에서 특정 값을 그래픽으로 나타냅니다. 그러나 목적의 슬라이더와 유사하지만 더 시각적이며 값을 선택할 수있는 뚜렷한 제어 기능이 포함되어 있지 않습니다. 그러나 레벨 표시기 자체를 통해 값을 클릭하고 드래그하여 값을 선택합니다. 레벨 표시기에는 TICK 마크가 포함되어있어 사용자가 범위의 특정 값을 쉽게 찾아 낼 수 있습니다. 용량, 등급 및 관련성을 통신하기 위해 각각 다른 외관을 가진 세 가지 레벨 표시기 스타일이 있습니다.
용량 표시기는 유한 용량과 관련하여 현재 레벨을 보여줍니다. 용량 표시기는 종종 디스크 및 배터리 사용과 같은 요소를 통신 할 때 사용됩니다. 자세히 알아보십시오
다음은 대화식 연속 용량 표시기를 만드는 방법의 예입니다.
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 : 사용자가 요일, 월 또는 연도를 선택하고 간병 제어 버튼을 사용하여 값을 변경 해야하는 텍스트 전용 날짜 선택기. 이것은 앱의 공간이 제한 될 때 유용합니다.graphical : 사용자가 캘린더와 같은 인터페이스를 탐색하여 날짜를 선택할 수있는 시각적 날짜 선택기.combined : textual 및 graphical 인터페이스를 모두 제공합니다. 시간 피커의 현지화는 weekdayAbbreviations 및 monthAbbreviations 매개 변수에 의해 지원됩니다 (예 : Apple의 사양과 일치하기 위해 표준 localizations.narrowWeekdays() 대신).
weekdayAbbreviations 일요일부터 시작하여 매주 매일 하나씩 7 줄의 목록이어야합니다.monthAbbreviations 1 월부터 시작하여 연중마다 하나씩 12 줄의 목록이어야합니다. 텍스트 인터페이스에 날짜가 표시되는 방식을 변경하기 위해 dateFormat 정의 할 수도 있습니다. 일련의 토큰 (사례에 민감하지 않음)이 필요하고 해당 값으로 대체합니다. 다음 토큰이 지원됩니다.
D : 월의 날 (1-31)DD : 월의 날 (01-31)M : 해의 달 (1-12)MM : 해의 달 (01-12)YYYY : Year (0000-9999)/ - . ) 기본 형식은 M/D/YYYY 입니다.
예제 사용 :
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),사용자가 시간을 선택할 수 있습니다.
세 가지 스타일의 MacosTimePickers 가 있습니다.
textual : 사용자가 시간 또는 분을 선택하고 간병 제어 버튼을 사용하여 값을 변경 해야하는 텍스트 전용 시간 선택기. 이것은 앱의 공간이 제한 될 때 유용합니다.graphical : 사용자가 시계와 같은 인터페이스의 손을 움직여 시간을 선택할 수있는 시각적 시간 선택기.combined : textual 및 graphical 인터페이스를 모두 제공합니다.예제 사용 :
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),사용자가 기본 MacOS 컬러 피커를 통해 색상을 선택할 수 있습니다.
ColorPickerMode Enum을 사용하여 피커를 시작할 모드를 선택할 수 있습니다. 기본값은 ColorPickerMode.wheel 입니다
이 위젯은 MacOS 이외의 플랫폼에서 작동하지 않습니다!
예제 사용 :
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
