macos_ui
Version 2.1.0
Виджеты и темы трепетают, реализующие текущий язык дизайна macOS.
Проверьте нашу галерею интерактивных виджетов онлайн по адресу https://macosui.github.io/macos_ui/#/
Руководства, коделабы и другая документация можно найти по адресу https://macosui.dev
macos_ui разработан против stable канала Flutter. Чтобы обеспечить бесперебойную разработку с macos_ui , вы должны построить свое приложение на stable канале Flutter.
Pub.DEV показывает, что macos_ui поддерживает только macOS. Это связано с тем, что macos_ui вызывает некоторый собственный код и, следовательно, определяет MacOS как платформу в файле pubspec.yaml .
macos_ui Технически будет работать на любой платформе, которая поддерживает трепетание, но вы получите наилучшие результаты на MacOS . Поддержка платформы не Macos не гарантируется.
Функции macos_ui , которые не будут работать на платформах, отличных от MacOS из -за вызова нативного кода, являются:
macos_window_utilsMacosColors.controlAccentColor()MacosColorWellПоскольку в это время Flutter не позволяет элементам пользовательского интерфейса переполнять границы окна, всплывающие окна ограничены доступным пространством.
Поэтому, если вы используете виджеты, которые создают всплывающие окна на вашей панели инструментов, например, 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 , используйте root 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 вашего приложения в 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 , которая управляет эффектом прозрачности панели инструментовЭтот виджет позволяет разработчикам достигать поведения панели инструментов, наблюдаемого в Apple App Store.
Пример использования:
return CustomScrollView (
controller : scrollController,
slivers : [
SliverToolBar (
title : const Text ( 'SliverToolbar' ),
pinned : true ,
toolbarOpacity : 0.75 ,
),
// Other slivers below
],
); Виджет, который направлен на то, чтобы аппроксимировать виджет 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 не рекомендуется изменить кнопку справки.
Радионожка - это маленькая круглая кнопка, за которой следует заголовок. Обычно представленные в группах от двух до пяти, радиопроизводительные кнопки предоставляют пользователю набор связанных, но взаимоисключающих вариантов. Состояние радионогих включено (заполненный круг) или выключен (пустой круг). Узнать больше
Вот пример того, как создать базовую радиопроизводительность:
bool selected = false ;
MacosRadioButton (
value : selected,
onChanged : (value) {
setState (() => selected = value);
},
),Кнопка снятия (часто называемая выпущенным меню)-это тип всплывающей кнопки, которая при нажатии отображает меню, содержащее список вариантов. Меню появляется под кнопкой. Как только меню отображается на экране, оно остается открытым, пока пользователь не выберет элемент меню, щелкнет за пределы меню, переключается на другое приложение или не выходит на приложение; или пока система не отобразит предупреждение. Узнать больше
Используйте кнопку раскрытия, чтобы представить список команд. Кнопка снятия может показать title или icon чтобы описать содержимое меню кнопки. Если вы используете значок, убедитесь, что он четко передает цель кнопки.
Если items являются нулевыми, кнопка будет отключена (серо -серий).
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" ),
),
],
),Кнопка всплывающего окна (часто называемая всплывающим меню)-это тип кнопки, которая при нажатии отображает меню, содержащее список взаимоисключающих вариантов. Меню появляется поверх кнопки. Как и другие типы меню, меню всплывающей кнопки может включать в себя разделители и символы, такие как чеки. После того, как меню раскрывается, оно остается открытым до тех пор, пока пользователь не выберет пункт меню, щелкнет за пределы меню, переключается на другое приложение или не выйдет из приложения; или пока система не отобразит предупреждение. Узнать больше
Тип T MacosPopupButton -это тип значения, которое представляет каждый всплывающий меню. Все записи в данном меню должны представлять значения с последовательными типами. Как правило, используется 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' );
},
),Переключатель (также известный как переключатель) - это элемент управления, который предлагает бинарный выбор между двумя взаимоисключающими состояниями - включенным и выключенным. Переключатель показывает, что он включен, когда цвет акцента виден и выключен, когда переключатель выглядит бесцветным.
Enum ContolSize может быть передана в свойство 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 : только текстовый сборщик даты, где пользователь должен выбрать день, месяц или год и использовать кнопки контроля лечения, чтобы изменить значение. Это полезно, когда пространство в вашем приложении ограничено.graphical : сборщик даты визуальной даты, где пользователь может перемещаться по календарному интерфейсу, чтобы выбрать дату.combined : предоставляет как textual , так и graphical интерфейсы. Локализация Time Picker поддерживается параметрами weekdayAbbreviations localizations.narrowWeekdays() monthAbbreviations
weekdayAbbreviations должен быть списком из 7 строк, по одной для каждого дня недели, начиная с воскресеньяmonthAbbreviations должен быть списком из 12 строк, по одной для каждого месяца года, начиная с января Вы также можете определить dateFormat , чтобы изменить способ отображения дат в текстовом интерфейсе. Это требует цепочки токенов (нечувствительных к случаям) и заменяет их соответствующими значениями. Поддерживаются следующие жетоны:
D : день месяца (1-31)DD : день месяца (01-31)M : месяц года (1-12)MM : месяц года (01-12)YYYY : год (0000-9999)/ - , . ) Формат по умолчанию - M/D/YYYY .
Пример использования:
MacosDatePicker (
onDateChanged : (date) => debugPrint ( '$ date ' ),
),Позволяет пользователю выбирать время.
Есть три стиля MacosTimePickers :
textual : только текстовый сборщик времени, где пользователь должен выбрать час или минуту и использовать кнопки управления опекуй, чтобы изменить значение. Это полезно, когда пространство в вашем приложении ограничено.graphical : визуальный сборщик времени, где пользователь может переместить руки такового интерфейса, чтобы выбрать время.combined : предоставляет как textual , так и graphical интерфейсы.Пример использования:
MacosTimePicker (
onTimeChanged : (time) => debugPrint ( '$ time ' ),
),Позволяет пользователю выбирать цвет через нативного цветового сборщика MacOS.
Вы можете выбрать, какой режим запустить Picker в использовании Enum ColorPickerMode . По умолчанию - ColorPickerMode.wheel
Этот виджет не будет работать на платформах, отличных от MacOS!
Пример использования:
MacosColorWell (
onColorSelected : (color) => debugPrint ( '$ color ' ),
),
