Учебное пособие по .NET MAUI. Создайте свое первое многоплатформенное приложение на C#
Введение
Цель
Настройте среду разработки и создайте свое первое приложение .NET Multi-platform App UI (.NET MAUI).
Обязательные требования
Проверьте системные требования для Visual Studio 2022.
Минимальные требования для последней версии Xcode.
Время завершения
10 минут + время загрузки/установки
Сценарий
Мобильное и настольное приложение, которое работает в Windows и Android и выводит сообщение Hello, World!.
Мобильное и классическое приложение, которое работает на Mac и iOS и выводит сообщение Hello, World!.
Загрузить и установить
Загрузите и установите Visual Studio 2022.
Во время установки следует выбрать рабочую нагрузку Разработка .NET Multi-platform App UI. Использование приведенной выше ссылки должно правильно выбрать все предварительные условия, как показано на следующем изображении:
У вас уже есть Visual Studio 2022?
Если у вас уже есть решение Visual Studio 2022, обновите его и установите требуемую рабочую нагрузку:
- Нажмите клавишу Windows, введите Установщик Visual Studio и нажмите клавишу Enter.
- При появлении запроса разрешите программе установки обновить себя.
- Если доступно обновление для Visual Studio 2022, будет показана кнопка Обновить. Нажмите ее для обновления перед изменением установки. Это руководство подходит только для Visual Studio 2022 версии 17.8 и более поздних версий.
- Найдите свою установку Visual Studio 2022 и выберите Изменить.
- Выберите Разработка .NET Multi-platform App UI.
- Нажмите кнопку Изменить.
-
Скачайте и установите пакет SDK для .NET:
Скачать пакет SDK x64 для .NET 8 (Intel)
Скачать пакет SDK Arm64 для .NET 8 (Apple Silicon)Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
-
Скачайте и установите VS Code:
-
Откройте VS Code и нажмите кнопку Расширения на панели действий VS Code слева. Введите MAUI на панели поиска, выберите .NET MAUI, а затем нажмите кнопку Установить на странице расширения .NET MAUI.
![Расширение MAUI VS Code]()
Это расширение поставляется с расширениями C# Dev Kit и C#, которые необходимы для запуска расширения .NET MAUI.
![Зависимости расширения MAUI VS Code]()
-
Откройте новый терминал и установите рабочую нагрузку .NET MAUI, выполнив следующую команду:
Terminalsudo dotnet workload install mauiЕсли установка прошла успешно, вы должны увидеть вывод, подобный следующему:
TerminalSuccesfully installed workload maui
Проверьте, все ли установлено правильно
После настройки среды откройте новый терминал VS Code. На панели инструментов выберите Терминал, а затем Новый терминал.
В терминале выполните следующую команду, чтобы проверить установку.
dotnet
Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.Произошла ошибка?
Если вы получили сообщение об ошибке dotnet не распознается как внутренняя или внешняя команда, откройте новый терминал VS Code. Если перезапуск VS Code или перезагрузка компьютера не решает проблему, воспользуйтесь кнопкой У меня возникла проблема в нижней части окна, чтобы получить помощь в ее устранении.
Установить Xcode
Для разработки приложений .NET MAUI вам также потребуется следующее.
-
Apple ID
Если у вас еще нет Apple ID, вы можете создать новый на странице https://appleid.apple.com. . Apple ID требуется для установки и входа в Xcode.
После установки Xcode требуется открыть Xcode, принять лицензионные соглашения и установить дополнительные компоненты, если будет предложено.
-
При запросе о предпочитаемых платформах для разработки выберите платформы macOS и iOS, а затем нажмите Скачать и установить.
![Запрос Xcode на установку платформ macOS и iOS]()
-
Откройте новый терминал и установите средства разработчика командной строки Xcode, выполнив следующую команду:
Terminalxcode-select --installПри запросе на установку средств разработчика командной строки Xcode выберите Установить. В конце примите лицензионное соглашение.
![Запрос Xcode на установку средств разработчика командной строки]()
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Создайте свое приложение
Создание приложения .NET MAUI:
- Откройте Visual Studio 2022
- Нажмите кнопку Создать новый проект.
-
В окне Создать новый проект введите в поле поиска Приложение MAUI. Выберите шаблон Приложение .NET MAUI и нажмите кнопку Далее.
![Диалоговое окно нового проекта Visual Studio с выбранным приложением .NET MAUI]()
-
В окне Настройте новый проект введите MyFirstMauiApp в качестве имени проекта и нажмите кнопку Далее.
![Visual Studio настройте диалоговое окно нового проекта с MyFirstMauiApp в качестве имени проекта.]()
-
В окне Дополнительные сведения в раскрывающемся списке Платформа выберите .NET 8.0 (условия долгосрочной поддержки), если она еще не выбрана, и нажмите кнопку Создать.
![Диалоговое окно дополнительных сведений в Visual Studio. В раскрывающемся списке Framework виден элемент .NET 8.0.]()
Visual Studio создает новый проект. Если вы получили предупреждение системы безопасности Windows о том, что брандмауэр блокирует некоторые функции, нажмите кнопку Разрешить доступ.
Подождите процесса восстановления пакетов NuGet
NuGet — это диспетчер пакетов, который будет переводить зависимости нового приложения.
Процесс восстановления пакета начнется автоматически. Подождите, пока в строке состояния в левом нижнем углу экрана не появится сообщение Восстановлено или Готово.
- Откройте палитру команд в 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 в первую очередь на вашем локальном компьютере с Windows. Позже у вас будет возможность настроить Android-устройство или эмулятор.
На панели инструментов Visual Studio в качестве целевого объекта отладки по умолчанию указан компьютер с Windows. Нажмите кнопку компьютера с Windows, чтобы выполнить сборку и запуск приложения:
Если вы еще не включили режим разработчика, Visual Studio предложит включить его. В диалоговом окне "Включить режим разработчика для Windows" щелкните параметры для разработчиков, чтобы открыть приложение "Параметры":
В зависимости от версии Windows этот параметр может выглядеть немного по-другому. Включите переключатель в разделе Режим разработчика или рядом с ним.
Откроется диалоговое окно Использовать функции разработчика. Выберите Да, чтобы подтвердить, что вы хотите включить режим разработчика.
Закройте приложение "Параметры", а затем закройте диалоговое окно Режим разработчика для Windows. Приложение должно запуститься.
В работающем приложении нажмите кнопку "Нажми меня" несколько раз и убедитесь, что значение счетчика нажатий кнопки увеличивается:
В этом руководстве внимание будет в первую очередь уделено развертыванию приложения .NET MAUI на локальном компьютере с Mac. Позже у вас будет возможность выполнить запуск на симуляторе iOS.
В правом нижнем углу окна VS Code вы должны увидеть фигурные скобки в строке состояния. Щелкните фигурные скобки, и в качестве целевого объекта отладки по умолчанию будет выбрано Мой Mac.
Если ничего не выбрано, щелкните Целевой объект отладки и выберите Мой Mac в списке. Обратите внимание, что это может быть не первый элемент в списке при первом выборе целевого объекта отладки.
Чтобы запустить приложение, щелкните значок Запуск и отладка на панели действий VS Code. Затем нажмите Запуск и отладка.
В работающем приложении нажмите кнопку "Нажми меня" несколько раз и убедитесь, что значение счетчика нажатий кнопки увеличивается:
Поздравляем! Вы построили и запустили свое первое приложение .NET MAUI! Оставьте приложение открытым и продолжайте выполнять инструкции руководства.
Отредактируйте свой код
При разработке приложений с помощью .NET MAUI горячая перезагрузка XAML доступна во время отладки приложения. Это означает, что вы можете изменить пользовательский интерфейс (UI) XAML во время работы приложения, и пользовательский интерфейс будет обновляться автоматически.
Вернитесь в Visual Studio, оставив приложение запущенным. В Обозревателе решений дважды щелкните файл MainPage.xaml в проекте MyFirstMauiApp. Если вы не видите область Обозреватель решений, выберите " > Обозреватель решений" в основном меню (или нажмите CTRL+ALT+L).
Вернитесь к файлу MainPage.xaml в VS Code и оставьте приложение запущенным.
В настоящее время для параметра Text второго элемента Label в строке 17 установлено значение Hello, World!, как показано в следующем коде:
<Label
Text="Hello, World!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />Обновите текст следующим образом: Hello, .NET MAUI!:
<Label
Text="Hello, .NET MAUI!"
Style="{StaticResource Headline}"
SemanticProperties.HeadingLevel="Level1" />Пользовательский интерфейс приложения обновляется автоматически по мере внесения изменений.
При разработке приложений с .NET MAUI также можно использовать Горячую перезагрузку .NET для перезагрузки кода C#. Давайте изменим логику в приложении, чтобы при нажатии кнопки значение счетчика увеличивалось на 10, а не на 1.
Откройте MainPage.xaml.cs (этот файл вложен в MainPage.xaml, или вы можете щелкнуть правой кнопкой мыши и выбрать в меню Просмотреть код).
Метод OnCounterClicked в этом файле сейчас содержит следующий код:
private void OnCounterClicked(object sender, EventArgs e)
{
count++;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Обновите count++;, увеличив его на 10, изменив его на count += 10;.
private void OnCounterClicked(object sender, EventArgs e)
{
count += 10;
if (count == 1)
CounterBtn.Text = $"Clicked {count} time";
else
CounterBtn.Text = $"Clicked {count} times";
SemanticScreenReader.Announce(CounterBtn.Text);
}Чтобы применить изменения кода, сохраните файл и нажмите кнопку "Горячая перезагрузка" в Visual Studio или сочетание клавиш ALT+F10.
Выберите кнопку "Нажми меня" и посмотрите, как значение увеличивается на 10. Отлично! Теперь можно закрыть работающее приложение.
Запуск на мобильном устройстве
Вы можете принять решение о развертывании на одной или нескольких платформах в зависимости от среды разработки. Вы только что запустили и развернули свое приложение в 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.
.NET MAUI для начинающих
Позвольте Джеймсу провести вас через создание полноценного приложения .NET MAUI от начала до конца:
Вас также может заинтересовать...
