Руководство по .NET MAUI | Ваше первое мультиплатформенное приложение в C#

Введение

Цель

Настройте среду разработки и создайте свое первое приложение .NET Multi-platform App UI (.NET MAUI).

Обязательные требования

The minimum requirements for the latest version of Xcode.

Время завершения

10 минут + время загрузки/установки

Сценарий

Мобильное и классическое приложение, которое работает на Mac и iOS и выводит сообщение Hello, World!.

Загрузить и установить

Download and install the .NET SDK. After the download completes, launch the download to begin the install.

Download .NET 9 SDK x64 (Intel)
Download .NET 9 SDK Arm64 (Apple Silicon)

Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
Скачайте и установите VS Code:

Скачать VS Code
Откройте VS Code и нажмите кнопку Расширения на панели действий VS Code слева. Введите MAUI на панели поиска, выберите .NET MAUI, а затем нажмите кнопку Установить на странице расширения .NET MAUI.

Это расширение поставляется с расширениями C# Dev Kit и C#, которые необходимы для запуска расширения .NET MAUI.
Откройте новый терминал и установите рабочую нагрузку .NET MAUI, выполнив следующую команду:
Terminal
```
sudo dotnet workload install maui
```
Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:
Terminal
```
Successfully installed workload maui
```

Проверьте, все ли установлено правильно

После настройки среды откройте новый терминал VS Code. На панели инструментов выберите Терминал, а затем Новый терминал.

В терминале выполните следующую команду, чтобы проверить установку.

Terminal

dotnet workload list

Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

Произошла ошибка?

Если вы получили сообщение об ошибке dotnet не распознается как внутренняя или внешняя команда, откройте новый терминал VS Code. Если перезапуск VS Code или перезагрузка компьютера не решает проблему, воспользуйтесь кнопкой У меня возникла проблема в нижней части окна, чтобы получить помощь в ее устранении.

Установить Xcode

Для разработки приложений .NET MAUI вам также потребуется следующее.

Последняя версия Xcode

To find the latest version of Xcode that is compatible with .NET MAUI, check this release version reference. Go to the Apple Tools column to find the latest compatible Xcode version.

Apple ID

Если у вас еще нет Apple ID, вы можете создать новый на странице https://appleid.apple.com. . Apple ID требуется для установки и входа в Xcode.
После установки Xcode требуется открыть Xcode, принять лицензионные соглашения и установить дополнительные компоненты, если будет предложено.
При запросе о предпочитаемых платформах для разработки выберите платформы macOS и iOS, а затем нажмите Скачать и установить.
Откройте новый терминал и установите средства разработчика командной строки Xcode, выполнив следующую команду:
Terminal
```
xcode-select --install
```
При запросе на установку средств разработчика командной строки Xcode выберите Установить. В конце примите лицензионное соглашение.

Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.

Создайте свое приложение

Создание приложения .NET MAUI:

Откройте палитру команд в VS Code, нажав клавиши CMD+SHIFT+P.
Введите .NET: , чтобы просмотреть команды, которые можно выполнить с помощью C# Dev Kit!
Найдите и выберите .NET: новый проект, чтобы создать новый проект .NET.
Выберите Приложение .NET MAUI.
Выберите расположение папки для сохранения проекта.
При запросе присвойте имя проекту MyFirstMauiApp в палитре команд.

Если у вас есть подписка на Visual Studio, войдите в свою учетную запись. Если вы не видите всплывающий запрос, щелкните значок C# в строке состояния VS Code в правом нижнем углу окна.

Убедитесь, что Обозреватель открыт на боковой панели VS Code. Должна отображаться папка и Обозреватель решений. Если вы открыли новый экземпляр VS Code, Обозреватель решений может находиться в нижней части боковой панели.

В Обозревателе решений выберите MainPage.xaml. Этот файл содержит разметку, описывающую структуру и макет элементов пользовательского интерфейса в приложении MAUI.

Запустите свое приложение

В этом руководстве внимание будет в первую очередь уделено развертыванию приложения .NET MAUI на локальном компьютере с Mac. Позже у вас будет возможность выполнить запуск на симуляторе iOS.

В правом нижнем углу окна VS Code вы должны увидеть фигурные скобки в строке состояния. Щелкните фигурные скобки, и в качестве целевого объекта отладки по умолчанию будет выбрано Мой Mac.

Если фигурные скобки не отображаются в строке состояния, убедитесь, что открыт соответствующий файл проекта, например файл CS, XAML или CSPROJ, принадлежащий проекту .NET MAUI. Или вы можете открыть палитру команд в VS Code, нажав клавиши CMD+SHIFT+P. Затем введите .NET MAUI: Pick. В результате отобразятся параметры выбора платформы отладки для проекта.

Если ничего не выбрано, щелкните Целевой объект отладки и выберите Мой Mac в списке. Обратите внимание, что это может быть не первый элемент в списке при первом выборе целевого объекта отладки.

Чтобы запустить приложение, щелкните значок Запуск и отладка на панели действий VS Code. Затем нажмите Запуск и отладка.

В работающем приложении нажмите кнопку "Нажми меня" несколько раз и убедитесь, что значение счетчика нажатий кнопки увеличивается:

Поздравляем! Вы построили и запустили свое первое приложение .NET MAUI! Оставьте приложение открытым и продолжайте выполнять инструкции руководства.

Отредактируйте свой код

Вернитесь к файлу MainPage.xaml в VS Code и оставьте приложение запущенным.

В настоящее время для параметра Text второго элемента Label в строке 17 установлено значение Hello, World!, как показано в следующем коде:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Обновите текст следующим образом: Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

Пользовательский интерфейс приложения обновляется автоматически по мере внесения изменений.

Запуск на мобильном устройстве

Вы можете принять решение о развертывании на одной или нескольких платформах в зависимости от среды разработки. Вы только что запустили и развернули свое приложение в Windows. Теперь давайте настроим устройство Android или Android Emulator.

Активировать Hyper-V

В строке поиска Windows введите Функции Windows и выберите Включить или отключить функции Windows.

Установите флажок Microsoft Hyper-V и нажмите ОК.

Необходимо перезагрузить компьютер, чтобы изменения вступили в силу.

Установка Android SDK

Откройте Visual Studio и ваше решение MyFirstMauiApp. В раскрывающемся меню целевого объекта отладки выберите net8.0-android в разделе Framework.

Для создания проектов требуются определенные версии Android SDK. Если вы не приняли лицензию Android SDK, вы увидите следующее сообщение об ошибке в окне Список ошибок.

Дважды щелкните сообщение, чтобы начать процесс принятия лицензии. Нажмите Принять для каждой из имеющихся лицензий, после чего начнется автоматическая установка.

Настроить эмулятор Android

Если у вас нет устройства Android, чтобы развернуть приложение на нем, выполните описанные далее действия, чтобы настроить эмулятор Android. Если вы уже сделали это или хотите использовать собственное устройство Android, можете пропустить этот шаг.

Если вы впервые создаете приложение .NET MAUI, то в раскрывающемся меню целевого объекта отладки увидите выбранный пункт Android Emulator. Щелкните его, чтобы начать процесс создания. Если появится диалоговое окно принятия лицензии, выберите Принять.

В результате откроется окно Новое устройство. Нажмите кнопку Создать, чтобы создать эмулятор с параметрами по умолчанию. Будут скачаны образы эмулятора и завершено его создание для использования в Visual Studio. Это может занять некоторое время.

Не беспокойтесь, если уровень API, который вы видите, отличается от изображений. Возможно, значение равно 33 или выше.

После создания эмулятора вы увидите кнопку с надписью Начать. Нажмите на нее.

Возможно, вы увидите запрос на включение платформы низкоуровневой оболочки Windows. Следуйтедокументации, чтобы включить ускорение для повышения производительности (это необходимо для запуска эмулятора). Выберите Все равно запустить.

Android Emulator запустится и будет полностью завершен, когда вы увидите возможность Остановить в Диспетчере устройств Android. Это может занять некоторое время.

Когда все будет готово, оно отобразится в меню отладки Visual Studio.

Ваш эмулятор Android создан и готов к использованию. В следующий раз, когда вы запустите Visual Studio, эмулятор появится непосредственно в целевом окне отладки и запустится, когда вы его выберете. Если вы столкнулись с какими-либо проблемами или проблемами с производительностью эмулятора, прочтите полную документацию по установке.

Настройка устройства с Android

Для разработки на устройстве с Android необходимо включить отладку USB. Выполните следующие действия на устройстве, чтобы подключить его к Visual Studio. Если у вас нет устройства с Android, вы можете пропустить этот раздел.

Включить режим разработчика

Перейдите на экран Настройки.
Найдите номер сборки с помощью поиска в верхней части экрана настроек или найдите его в разделе «О телефоне».
Нажмите Номер сборки 7–10 раз, пока не появится сообщение «Теперь вы разработчик!\».

Проверьте состояние отладки USB

Перейдите на экран Настройки.
Найдите Отладка по USB с помощью поиска в верхней части экрана настроек или найдите его в параметрах разработчика.
Включите отладку по USB, если она еще не включена.

Доверять устройству

Подключите устройство к компьютеру.
Вам будет предложено Разрешить отладку USB.
Установите флажок Всегда разрешать с этого компьютера.
Щелкните "Разрешить".

Теперь ваше устройство настроено и будет отображаться в Visual Studio в качестве цели развертывания.

Возникли проблемы? Проверьте документацию.

Теперь ваш эмулятор или устройство должны быть настроены для развертывания!

Запустить на Android

Убедитесь, что ваше устройство или эмулятор выбраны в качестве цели отладки.

В меню выберите Отладка > Начать отладку (или нажмите F5). Если этот параметр отключен, убедитесь, что выбран эмулятор или устройство.

Ваше приложение будет собрано, развернуто на выбранном Android-устройстве/эмуляторе и запущено.

Вы можете выполнить развертывание на одной или нескольких платформах в зависимости от среды разработки. Вы только что запустили и развернули свое приложение в macOS. Теперь давайте выполним развертывание в iOS.

Закройте приложение .NET MAUI, которое вы запустили, и вернитесь в VS Code.

Щелкните фигурные скобки в правом нижнем углу окна VS Code в строке состояния и выберите Целевой объект отладки.

Прокрутите вниз и выберите iPhone 15.

Теперь вы должны увидеть iOS: iPhone 15 в качестве нового целевого объекта отладки.

Чтобы запустить приложение, щелкните значок Запуск и отладка на панели действий VS Code. Затем нажмите Запуск и отладка.

Ваше приложение выполнит сборку и развертывание в симуляторе iPhone. Обратите внимание, что это может занять некоторое время, так как выполняется виртуальное включение iPhone!

Следующие шаги

Поздравляем, вы создали и запустили ваше первое приложение .NET MAUI!

Продолжайте обучение

Теперь, когда у вас есть основы, продолжайте учиться создавать приложения .NET MAUI с помощью пути самостоятельного обучения в Microsoft Learn.

Схема обучения MAUI для .NET

.NET MAUI для начинающих

Позвольте Джеймсу провести вас через создание полноценного приложения .NET MAUI от начала до конца:

Вас также может заинтересовать...

Документы для разработчиков

Изучите документацию по .NET MAUI.

Образцы .NET MAUI

Ознакомьтесь с примерами .NET MAUI на GitHub.

Учебное пособие по .NET MAUI. Создайте свое первое многоплатформенное приложение на C#