Как варить компот из фиников


рецепты с курагой и яблоками, что можно добавлять, вред и польза, как варить для детей

Плоды финиковой пальмы – хорошо известное и всеми любимое лакомство. Вкус сушеных фиников большинству людей знаком с детства, а вот компот, как ни странно, не снискал такой популярности.

Полезные свойства

О полезных свойствах этого восточного лакомства можно говорить часами. Мы же рассмотрим далее лишь основные из них.

  • Обилие пищевых волокон благоприятно влияет на работу кишечника. Пищевые волокна не перевариваются организмом и очищают кишечник от шлаков.
  • За счет высокой энергетической ценности, небольшая порция фиников способна дать мощный заряд сил и бодрости. Этот продукт незаменим в качестве перекуса для спортсменов и путешественников. В этих плодах содержится много простых углеводов, даже несколько штук позволяют быстро насытиться и восстановить силы.
  • Благодаря высокому содержанию витаминов, этот продукт прекрасно укрепляет иммунитет, ускоряет выздоровление при простуде и ОРВИ. Особенно рекомендуется при весеннем авитаминозе.
  • Высокое содержание кальция способствует укреплению костей и зубов, скорейшему сращению переломов.
  • Витамин А или ретинол улучшает состояние волос и ногтей.
  • Благодаря насыщенности калием, железом, белками, минералами и другими полезными веществами, финики при регулярном употреблении способны улучшить память и зрение, укрепить сердечно-сосудистую систему, стимулировать очищение крови, повысить потенцию, поддержать нервную систему, предупредить развитие анемии.

Противопоказания

Однако некоторым людям потребление фиников стоит ограничить или исключить вовсе.

  • Употреблять в пищу эти плоды не стоит при наличии аллергии, астмы, камней в почках, проблем с желудочно-кишечным трактом.
  • Из-за высокого уровня содержания сахара, финики могут нанести вред здоровью диабетиков.
  • Калорийность и ударное количество фруктозы заставляет медиков рекомендовать людям, испытывающим проблемы с лишним весом, отказаться от этого лакомства.
  • Не рекомендуют финики и беременным, поскольку некоторые вещества, содержащиеся в них, способны вызвать сокращение матки.
  • Педиатры не рекомендуют включать данные сухофрукты в рацион детей в возрасте до полутора лет.

Как выбрать?

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

  • Первое, на что стоит обратить внимание перед приобретением – внешний вид продукта. Качественные финики имеют равномерный темный цвет и гладкую поверхность. Если кожица на сухофруктах имеет повреждения, это может свидетельствовать о том, что финики были высушены в духовом шкафу, а значит, потеряли большое количество витаминов.
  • Отдавайте предпочтение плодам с косточкой – в таких сухофруктах сохраняется больше витаминов.
  • На ощупь продукт не должен быть липким или скользким – это говорит о нарушении технологии производства или условий хранения.
  • Обязательно оцените аромат фиников перед приобретением. Запах сухофруктов должен быть нейтральным, без посторонних ноток плесени или химических веществ.

8 секретов вкусного и полезного напитка

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

  • перед варкой финики следует замочить в холодной воде, промыть, вынуть косточки;
  • в компот лучше добавить немного кураги, яблок, апельсинов или других фруктов, содержащих кислинку;
  • сахар можно заменить медом;
  • хорошо дополнят напиток корица, мята, имбирь, цедра апельсина или лимона;
  • сухофрукты стоит опускать в кипящую воду, а не в холодную;
  • чтобы сохранить максимум витаминов, не следует давать компоту кипеть более 5 минут;
  • для того чтобы компот стал более насыщенным и ароматным, позвольте ему остыть самостоятельно, не пытайтесь ускорить процесс;
  • готовый напиток сохраняет свои полезные свойства в течение суток при условии хранения в холодильнике.

Следуя этим советам, вам удастся добиться совершенного вкуса, насыщенного аромата и максимальной пользы от этого замечательного напитка.

Популярные рецепты

Предлагаем ознакомиться с несколькими простыми рецептами приготовления компота из фиников.

С яблоком и мятой

Ингредиенты:

  • финики – 200 граммов;
  • яблоки с кислинкой – 3 штуки;
  • мята свежая – 10 граммов;
  • сахар или мед – 3 столовых ложки;
  • вода – 3.5 литра.

Приготовление:

  • финики замочить, вымыть, слить воду;
  • отделить сухофрукты от косточек и нарезать соломкой;
  • вымыть яблоки, удалить сердцевину, разрезать на 5-6 долек;
  • листья мяты отделить от веток и вымыть;
  • финики, яблоки и сахар (если используем его), добавить в кипящую воду и варить 5-7 минут;
  • листья мяты добавить за пару минут до окончания варки;
  • готовому напитку дать настояться в теплом месте около часа.

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

С курагой и имбирем

Ингредиенты:

  • финики – 100 граммов;
  • курага – 100 граммов;
  • корень имбиря свежий – 20 граммов;
  • сахар или мед по вкусу;
  • вода – 3 литра.

Приготовление:

  • сухофрукты замочить в холодной воде, промыть;
  • удалить из фиников косточки, нарезать их соломкой, курагу разрезать на 2 части;
  • в кипящую воду опустить сухофрукты и корень имбиря, нарезанный тонкими полосками;
  • варить 5 минут;
  • дать остыть и настояться в темном месте;
  • в охлажденный напиток добавить мед по вкусу.

Вкусный и полезный компот для всей семьи готов!

С чабрецом, изюмом, яблоком и грушей

Ингредиенты:

  • финики – 200 граммов;
  • изюм – 50 граммов;
  • яблоки сушеные – 200 граммов;
  • груши сушеные – 50 граммов;
  • чабрец свежий – 4 веточки;
  • вода – 4 литра.

Приготовление:

  • сухофрукты перебрать, залить теплой водой, промыть, отделить от косточек;
  • налить в кастрюлю 4 литра воды и довести до кипения;
  • в кипящую воду опускаем сухофрукты и варим 5-10 минут;
  • за минуту до готовности опускаем в напиток веточки тимьяна;
  • настаиваем в теплом месте не менее 5 часов.

Сахар можно не добавлять. Несмотря на природную сладость, этот прекрасный напиток отлично утоляет жажду. Подавайте охлажденным и наслаждайтесь!

О том, как приготовить напиток из фиников, смотрите в следующем видео.

datepicker - Угловой компонент выбора даты Составление материала

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

docker - Как открыть / запустить файл компоновки YML?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии
.

ios - как составить дату из первого NSDate и время из второго NSDate в один NSDate?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
.Учебное пособие по

Jetpack Compose для Android: начало работы

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

Это означает, что люди отошли от классического императивного подхода MVC / P (Model-View-Controller / Presenter) к более реактивному подходу, например MVVM (Model-View-ViewModel) , где вы обновляете потоки данных в ViewModel, и пользовательский интерфейс реагирует на изменение, перерисовывая себя или просто обновляя разделы пользовательского интерфейса. Это связано с тем, что декларативное программирование менее подвержено ошибкам, более компонуемо и легче тестируется, поскольку вы работаете в основном со значениями данных, а не с взаимодействиями.

MVVM с реактивным ранцем

Следуя этой тенденции, вполне естественно, что создание пользовательских интерфейсов также развернулось в том же направлении, с тенденцией к декларативным фреймворкам и инструментам пользовательского интерфейса. Наборы инструментов и фреймворки для внешнего интерфейса, такие как React.js и Flutter , становятся все более популярными с каждым днем, и это повлияло на другие платформы, чтобы предложить свои собственные реализации с использованием того же подхода.

На Google I / O 2019 Google впервые анонсировала Jetpack Compose .Jetpack Compose - это их ответ на тенденцию декларативного фреймворка пользовательского интерфейса, которую разрабатывает команда Android, чтобы фундаментально изменить способ создания пользовательского интерфейса разработчиками, упростив и ускорив написание, а также повысив производительность. Он является частью набора библиотек Jetpack и, как таковой, должен обеспечивать совместимость со всеми версиями платформы, устраняя необходимость избегать определенных функций, поскольку вы ориентируетесь на устройства более низкого уровня или более старые версии Android.

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

В этом руководстве вы узнаете об основных концепциях Jetpack Compose, таких как составных функций, , , устанавливающих содержимое на экран, и , обновляющих содержимое . Освоив основы, вы перейдете к использованию Jetpack Compose для создания приложения с поваренной книгой, которое отображает список рецептов блюд на основе материального дизайна с карточками, изображениями и текстами.

Примечание : Compose все еще находится на ранней стадии пре-альфа. Вам следует использовать , а не в производственных приложениях, так как он обязательно изменится и, возможно, сломает ваш код.

Зачем строить с помощью Jetpack Compose?

Прежде чем писать свое первое приложение с помощью Compose, рассмотрите , почему именно команда Android написала библиотеку.

Compose имеет три огромных преимущества по сравнению с текущим процессом создания пользовательского интерфейса в Android.

Заявительное

Jetpack Compose - это декларативная структура пользовательского интерфейса , что означает, что вы описываете свое представление, не полагаясь на мутации и более традиционные концепции императивного программирования.

Возьмем для примера скрытие представления. В текущем наборе инструментов пользовательского интерфейса вы обычно используете такой метод, как findViewById () , чтобы получить ссылку на View , который вы хотите скрыть, а затем вызываете для него setVisibility () .

В декларативном пользовательском интерфейсе вы вместо этого описываете пользовательский интерфейс как видимый или нет. Если вы хотите изменить видимость, вы повторно запускаете код, описывающий пользовательский интерфейс.

Таким образом, вы больше не получаете ссылку на View после его создания.Вместо этого вы просто повторно запускаете код, создавший View с другими параметрами.

Примечание : Compose фактически не перестраивает весь View, когда вы что-то обновляете. Достаточно умен, чтобы изменить только тот раздел, который нужно изменить.

Это независимый

Compose - это библиотека, не связанная с операционной системой. Это большое преимущество для разработчиков.

Прямо сейчас, если Google хочет обновить компонент LinearLayout , ему необходимо выпустить новую версию ОС.К сожалению, проблемы с фрагментацией не позволяют многим людям использовать последние версии Android.

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

С помощью Jetpack Compose разработчики могут добавлять новые функции, не меняя версию ОС. Вы можете положиться на их работу независимо от операционной системы на устройстве пользователя.

Не только это, но и в отличие от компонента LinearLayout , выпуск новых версий Jetpack Compose не нарушит работу существующих приложений, потому что вам не нужно обновляться до более новой версии Jetpack Compose, если вы этого не хотите.Он также не использует существующий набор инструментов пользовательского интерфейса от Android, так что это новый старт, позволяющий исправить некоторые давние проблемы иерархии представлений. Принимая во внимание, что как только вы обновляетесь до новой версии Android, компонент LinearLayout , являющийся частью операционной системы, также обновляется, и это может привести к критическим изменениям в приложениях, которые в значительной степени от него зависят.

It’s, кхм, сборный

И последнее, но не менее важное: Jetpack Compose решит некоторые давние проблемы с текущим набором инструментов пользовательского интерфейса.Это согласуется с идеей независимости.

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

Compose позволит Google начать с нуля в более компонуемой манере .

Начало работы

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

Поскольку Jetpack Compose находится в таком раннем пре-альфа состоянии, вам потребуется запустить как минимум Android Studio 4.0 Canary 3 или новее.

На момент написания вы должны быть на канале Canary в Android Studio для работы с Compose. Чтобы переключиться на канал Canary для обновлений, перейдите в диалоговое окно Check for Updates и щелкните Configure в нижнем левом углу диалогового окна.

Затем выберите Canary Channel в раскрывающемся списке на экране конфигурации.

Щелкните OK и снова запустите Проверить наличие обновлений . Вы увидите запрос на установку Canary-версии Android Studio.

Установите новую версию. Вы можете установить Canary и стабильную версию Android Studio одновременно. Вы узнаете, что используете версию Canary, потому что в ней есть желтая версия значка Android Studio.

Теперь, когда у вас установлена ​​нужная версия Android Studio, пора погрузиться в Jetpack Compose!

Начало работы с Jetpack Compose

Перейдите к загруженным материалам и откройте начальный проект в Canary-версии Android Studio.

Build and run, и вы увидите пустой белый экран с текстом Hello World нового проекта Android Studio.

Теперь откройте файл app / build.gradle и посмотрите на блок dependencies . Вы увидите три интересных зависимости:

 реализация 'androidx.ui: ui-layout: 0.1.0-dev02' реализация 'androidx.ui: ui-material: 0.1.0-dev02' реализация 'androidx.ui: ui-tooling: 0.1.0-dev02' 

Compose использует androidx.ui для зависимостей, составляющих библиотеку.

В дополнение к этим зависимостям вам также необходимо добавить флаг compose как true в блоке buildFeatures в android :

 buildFeatures { сочинять правду } 

Теперь, когда вы узнали, какие зависимости вам нужны для проекта Jetpack Compose, можно приступить к работе.

Опускание пальцев ног в реактивный ранец Compose

Поскольку Jetpack Compose предоставляет программный способ создания пользовательских интерфейсов, вы не будете использовать какой-либо XML.Это означает, что вы не будете использовать setContentView () в своих действиях или фрагментах, вместо этого вы будете использовать setContent () для настройки пользовательского интерфейса.

Для этого откройте MainActivity.kt и замените существующий вызов setContentView () следующим:

 setContent { Текст («Привет, мир!») } 

Обязательно импортируйте зависимости из пакета androidx.ui.core , как только вы это сделаете. setContent () - это функция расширения Kotlin в действии Activity , которая принимает лямбда-выражение @Composable в качестве параметра.Вы узнаете больше о том, что означает @Composable позже.

Помимо setContent () , в приведенном выше фрагменте кода появился еще один новый игрок: Text () .

В Jetpack Compose вы используете методы, отмеченные аннотацией @Composable для создания вашего пользовательского интерфейса. Если вы нажмете , удерживая нажатой клавишу «Command» на Mac или , удерживая нажатой клавишу «Control», щелкните в Windows на Text () , вы увидите что-то вроде этого:

 @Composable забавный текст ( ... ) 

Text () на самом деле является функцией с пометкой @Composable . Text () composable отвечает за, как вы уже догадались, рисование текста на экране. Вы можете думать об этом как о Compose-версии TextView .

Примечание : Обычно при именовании методов используется camelCase. Однако когда вы создаете составные объекты, вы пишете имя метода с заглавной буквы, чтобы было ясно, что вы создаете экземпляр составного объекта.Подобно тому, как работают виджеты Flutter или функции Kotlin Coroutine, такие как Job () , называются

.

Build and run, и вы увидите на экране Text () ! :]

Вы можете настроить свой текст, используя TextStyle . Попробуйте, заменив существующий Text () следующим:

 Текст («Привет, мир!», Style = TextStyle (color = Color.Red)) 

Еще раз убедитесь, что вы импортировали правильный androidx.ui пакетов. Соберите и запустите, и вы увидите, что текст теперь красный.

При использовании Jetpack Compose вы будете использовать обычный код Kotlin и аргументы метода вместо стилей и атрибутов XML для настройки пользовательского интерфейса. Вы попробуете свои силы в следующем разделе.

Создание составной функции

Одним из наиболее важных преимуществ Jetpack Compose является то, что вы создаете свой пользовательский интерфейс по модульному принципу с множеством небольших функций, вместо того, чтобы использовать один гигантский файл XML для каждого действия Activity .

Теперь, когда вы знакомы с Text () , вы можете создать свою первую функцию @Composable .

Добавьте следующую функцию ниже MainActivity :

 @Composable fun Greeting () { Текст («Привет, мир!», Style = TextStyle (color = Color.Red)) } 

Поздравляем, вы только что создали свою первую настраиваемую функцию Composable!

Чтобы использовать его, замените существующий вызов Text () в setContent () на вызов Greeting () :

 setContent { Приветствие() } 

Сборка и запуск.Как и раньше, вы увидите ослепительный красный текст!

Использование множества небольших функций - отличный способ создать фрагменты пользовательского интерфейса, которые можно повторно использовать на разных экранах.

Однако следует иметь в виду, что вы можете вызвать функцию @Composable только из другой функции @Composable ; в противном случае ваше приложение выйдет из строя.

Это похоже на Kotlin Coroutines, где вы можете вызывать только приостанавливающие функции из других приостанавливающих функций или сопрограмм.

Предварительный просмотр составного

Обычно, когда вы создаете пользовательский интерфейс для одного из ваших действий в XML, вы используете предварительный просмотр макета, чтобы увидеть, как будет выглядеть ваше представление, без необходимости создавать и запускать приложение.

Jetpack Compose поставляется с аналогичным инструментом.

Добавьте @Preview ниже @Composable в Greeting () , которое вы определили ранее:

 @Composable @Preview fun Greeting () { Текст («Привет, мир!», Style = TextStyle (color = Color.Красный)) } 

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

Щелкните Показать предварительный просмотр и дождитесь завершения сборки. Вы увидите предварительный просмотр вашего составного объекта в правой части экрана.

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

Теперь, когда вы можете предварительно просмотреть свои компоненты, пора научиться работать с макетами.

Расположение составных частей

Наличие на экране только одного Text не делает приложение особенно интересным. Тем не менее, наличие на экране трех Text s должно дать абсолютно захватывающих впечатлений! :]

Обновите Greeting () , чтобы использовать Text () три раза:

 Текст («Привет, мир!», Style = TextStyle (color = Color.Красный)) Текст («Привет, Второй мир!», Style = TextStyle (color = Color.Red)) Текст («Привет, Третий мир!», Style = TextStyle (color = Color.Red)) 

Как вы ожидаете, что этот составной элемент будет выглядеть? Выполните сборку и запустите и посмотрите в окне предварительного просмотра, чтобы увидеть, соответствуют ли результаты вашим ожиданиям.

Отлично .

Шучу, выглядит ужасно! :]

Ничто не управляет расположением этих элементов управления Text , поэтому все они рисуются друг над другом, как если бы они находились в FrameLayout .К счастью, Jetpack Compose предлагает большую коллекцию компонентов компоновки.

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

Использование составного столбца

Подумайте о столбце как о LinearLayout с вертикальной ориентацией. Он просто размещает все свои дочерние компоненты в вертикальном столбце.

Обновите приветствие () , чтобы обернуть три текста () в столбец () :

 @Composable @Preview fun Greeting () { Столбец { Текст («Привет, мир!», Style = TextStyle (color = Color.Красный)) Текст («Привет, Второй мир!», Style = TextStyle (color = Color.Red)) Текст («Привет, Третий мир!», Style = TextStyle (color = Color.Red)) } } 

Column () принимает лямбда-блок @Composable , в котором вы объявляете дочерние элементы столбца.

В Greeting () вы добавляете три Text s как дочерние элементы Column . Этот шаблон, когда компонуемая функция принимает лямбда-выражение для создания других составных функций, является обычным явлением в Jetpack Compose.Можно даже сказать, что в этом и состоит вся идея. :]

Build and run, и вы увидите, что теперь вы разместили три Text в вертикальном столбце. Намного лучше!

В дополнение к Column () , вы можете использовать Row () для размещения дочерних элементов в горизонтальном ряду. Это похоже на LinearLayout с горизонтальной ориентацией.

Представляем ComposableCookBook

Это было настоящее вступление, и я могу только представить, насколько вы взволнованы и разносторонни! Но вы можете захотеть составить себе , потому что вы будете работать над еще более интересной функцией для проекта! :]

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

 рецепт класса данных ( @DrawableRes val imageResource: Int, название val: Строка, val ингредиенты: Список  ) 

A Рецепт имеет изображение, название и список ингредиентов. Приложение также поставляется со списком рецептов по умолчанию в Recipes.kt . Вы будете использовать этот список рецептов для создания своего приложения с поваренной книгой.

Создание составного рецепта

Ваша цель - использовать Jetpack Compose, чтобы приложение рецептов ComposeCookbook выглядело лучше, путем создания пользовательского интерфейса, в котором каждый рецепт отображается на карточке с изображением рецепта вверху карточки и списком ингредиентов под ним.

Ваш первый шаг - создать составной объект, который показывает индивидуальный рецепт.

Щелкните правой кнопкой мыши в пакете ComposableCookBook и выберите New ▸ New Kotlin File / Class . Затем выберите File из списка и введите имя RecipeCard . Наконец, добавьте составной метод RecipeCard () , как показано ниже:

 @Composable fun RecipeCard (recipe: Рецепт) { Текст (recipe.title) } 

На данный момент это просто отображает название рецепта с использованием Text () .

Поскольку RecipeCard () принимает параметр, вы не можете использовать @Preview . Однако вы можете создать другой составной метод , который предоставляет RecipeCard () по умолчанию. Добавьте ниже RecipeCard () :

 @Composable @Preview fun DefaultRecipeCard () { RecipeCard (по умолчанию рецепты [0]) } 

Сборка и запуск. Теперь вы можете предварительно просмотреть RecipeCard () .

Затем вы собираетесь добавить изображение в RecipeCard () над заголовком.

Добавление изображения в RecipeCard

Замените содержимое RecipeCard () следующим:

 // 1 val изображение = + imageResource (recipe.imageResource) Столбец { // 2 Контейнер (расширенный = true, height = 144.dp) { // 3 DrawImage (изображение = изображение) } Текст (recipe.title) } 

Обязательно импортируйте все функции, которые могут быть отмечены красным цветом как неразрешенные ссылки. За такой крошечный кусок кода творится много волшебства! Вот разбивка:

  1. Каждый рецепт поставляется с ресурсом изображения, который указывает на Drawable .Обычно вы либо устанавливаете drawable в ImageView , либо используете Context , чтобы получить экземпляр Drawable .

    В Jetpack Compose вы используете другой механизм для получения экземпляра Image . Эта строка указывает Jetpack Compose получить изображение Image из заданного идентификатора вытягиваемого ресурса.

  2. Затем вам нужно каким-то образом изменить размер изображения, которое вы будете показывать. Контейнер - это простой составной макет, который может помочь вам изменить размер дочернего компонента.В этом сценарии вы говорите ему полностью развернуться по горизонтали и иметь высоту 144 dp.

    Обратите особое внимание на метод .dp , вызываемый для высоты. Compose предоставляет чрезвычайно удобный метод расширения для преобразования чисел в dp s!

  3. Наконец, вы используете DrawImage () для рендеринга изображения, передавая изображение Image , полученное на первом этапе.

Обновите предварительный просмотр, и вы увидите, как ваша карточка с рецептами начинает обретать форму!



Этот рамен выглядит довольно вкусно, но из каких ингредиентов его можно приготовить? Для следующего задания вы создадите список ингредиентов.

Список ингредиентов

Чтобы перечислить ингредиенты, воспользуйтесь своим удобным Text () . Поскольку вы уже определили столбец () на предыдущем шаге, добавить ингредиенты будет легко.

Добавьте следующий текст под текстом , нарисовав название рецепта:

 for (ингредиент в recipe.ingredients) { Текст (ингредиент) } 

Одна из замечательных особенностей Jetpack Compose заключается в том, что вы можете использовать обычный код Kotlin для выражения чуть более сложных деталей пользовательского интерфейса.

В приведенном выше коде вы используете цикл для , чтобы перечислить все ингредиенты Text . Если вы перестроите интерфейс, вы увидите, что все ингредиенты этого восхитительного рамена перечислены под названием. Довольно круто, правда? И вам не нужно было определять RecyclerView.Adapter или ViewHolder s!

Этот рамен выглядит вкусно, но сама карта рецепта выглядит довольно квадратной. Затем вы добавите закругленные углы на карточку рецепта, чтобы она была удобнее.

Закругление углов карты рецептов

Использование родителя Surface () дает вам возможность закруглить углы вашего элемента. Замените существующее содержимое RecipeCard () следующим:

 Поверхность (shape = RoundedCornerShape (8.dp), elevation = 8.dp) { val изображение = + imageResource (recipe.imageResource) Столбец { Контейнер (расширенный = true, height = 144.dp) { DrawImage (изображение = изображение) } Текст (рецепт.заглавие) for (ингредиент в recipe.ingredients) { Текст («• $ ингредиент») } } } 

Поверхность () обрабатывает фигур чертежей и обеспечивает отметки компонента. Для карты рецептов вы будете использовать Surface () с RoundedCornerShape () и высотой 8 dp.

Build and run, чтобы обновить предварительный просмотр, и вы заметите, что ничего не происходит. Вы также увидите небольшой значок восклицательного знака в правом верхнем углу окна предварительного просмотра, который указывает на ошибку или предупреждение.



Нажмите на этот значок, и вы увидите сообщение об ошибке. Он может сказать, что представление не может иметь нулевую ширину (0) или что не найдено цветов для рисования пользовательского интерфейса. На момент написания руководства мы получали разные ошибки на разных машинах, поэтому вы можете получить что-то другое. Независимо от того, что это сообщение об ошибке явно не указывает на проблему - недостаток Jetpack Compose все еще находится на стадии пре-альфа.

Тем не менее, проблема в том, что Jetpack Compose не может рисовать пользовательский интерфейс из-за отсутствия значения цвета, но этот недостаток происходит из-за отсутствия Theme , так что в этом и заключается виновник.

Добавление темы

Чтобы найти причину реальной проблемы, нажмите , удерживая клавишу Command, на Mac или , удерживая клавишу Control, щелкните в Windows на поверхности Surface () . Вы увидите что-то вроде этого:

 @Composable забавная поверхность ( shape: Shape = RectangleShape, color: Color = + themeColor {поверхность}, граница: Граница? = ноль, высота: Dp = 0.dp, дети: @Composable () () -> Unit ) 

Обратите внимание на линию, определяющую цвет:

 color: Color = + themeColor {поверхность} 

Compose использует механизм создания тем, который позволяет вам менять разные темы в зависимости от вашего пользовательского интерфейса.Однако вам необходимо убедиться, что у вас есть тема, которую можно компоновать над любым компонентом, который пытается получить цвет темы.

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

Устраните проблему, заключив RecipeCard () в MaterialTheme () в DefaultRecipeCard () :

 @Composable @Preview fun DefaultRecipeCard () { MaterialTheme { RecipeCard (по умолчанию рецепты [0]) } } 

MaterialTheme () / code> - это встроенная тема, которая предлагает множество цветов и стилей текста из коробки.

Обновите сборку. В предварительном просмотре теперь должна отображаться закругленная карточка!

Карточка начинает формироваться, но ей не хватает двух вещей: некоторого базового стиля компонента заголовка и некоторого отступа между элементами. Вы позаботитесь об этом на следующем шаге.

Улучшение внешнего вида карты рецептов

Начните с добавления стиля текста в заголовок рецепта Текст () :

 Текст (recipe.title, style = + themeTextStyle {h5}) 

Здесь вы используете параметр стиля для стилизации текста.Функциональность + themeTextStyle запрашивает текстовый стиль h5 из темы вашего приложения. Если вы перестроите предварительный просмотр, вы увидите, что ваш заголовок стал больше и жирнее. Ницца!

Добавление заполнения в карту рецепта

Чтобы добавить заполнение к вашей карточке, оберните заголовок и ингредиент Text () в другой столбец () и добавьте следующий модификатор:

 Столбец (модификатор = Интервал (16.dp)) { Текст (рецепт.title, style = + themeTextStyle {h5}) for (ингредиент в recipe.ingredients) { Текст («• $ ингредиент») } } 

Модификаторы позволяют настраивать пользовательский интерфейс компонента. В этом сценарии вы используете модификатор, чтобы добавить интервал вокруг столбца.

Вы можете использовать модификаторы гораздо больше, чем просто интервалы, включая расширение составного объекта или применение соотношения сторон.

Восстановите предварительный просмотр. Вы должны увидеть красивую карточку с рецептами:



Ваша карта рецепта теперь выглядит великолепно.Пришло время дать вашим пользователям возможность составлять списки своих любимых рецептов.

Создание списка рецептов

Обычно для составления списка используется что-то вроде RecyclerView . Авторы Jetpack Compose все еще работают над лучшим способом составить список элементов в новом наборе инструментов пользовательского интерфейса. На данный момент вы будете использовать VerticalScroller () . Это работает аналогично ScrollView в старом наборе инструментов пользовательского интерфейса.

Чтобы начать составлять список рецептов, еще раз щелкните правой кнопкой мыши на корневом пакете кода и выберите New ▸ New Kotlin File / Class .Затем выберите File из списка и введите имя RecipeList . Наконец, добавьте RecipeList () в файл:

 @Composable fun RecipeList (recipes: List ) { // 1 VerticalScroller { // 2 Столбец { // 3 for (рецепт в рецептах) { // 4 Padding (16.dp) { RecipeCard (рецепт) } } } } } 

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

  1. Вы используете VerticalScroller для создания прокручиваемого списка карточек рецептов.
  2. VerticalScroller ожидает иметь только одного дочернего элемента, аналогично тому, как работает ScrollView , поэтому вы добавляете Column .
  3. Затем вы просматриваете каждый рецепт в своем списке и создаете RecipeCard , которая добавляет их в столбец Column .
  4. Наконец, вы добавляете 16 dp заполнения вокруг каждой RecipeCard , чтобы список выглядел лучше.

Теперь, когда у вас есть составной элемент для отображения списка рецептов, пришло время подключить все к вашему MainActivity и посмотреть, как вы проделали тяжелую работу на устройстве!

Проводка всего

Перейдите к MainActivity и замените содержимое setContent () следующим:

 MaterialTheme { RecipeList (по умолчанию рецепты) } 

Вам необходимо включить MaterialTheme () в корень вашего контента, чтобы компоненты, которые достигают значений темы, могли за что ухватиться, как и в случае с DefaultRecipeCard () .

Сборка и запуск. Вы увидите аппетитный список вкусных блюд.



Приложение выглядит неплохо, но в нем отсутствует панель инструментов! Вы добавите один в качестве последнего шага.

Добавление панели инструментов

Наличие панели инструментов - это стандартное поведение приложений Android, поэтому важно включить ее! Замените содержимое setContent () на следующее:

 MaterialTheme { // 1 FlexColumn { // 2 негибкий { // 3 TopAppBar (title = { Текст ("ComposableCookBook") }) } // 4 гибкий (flex = 1f) { RecipeList (по умолчанию рецепты) } } } 

Это много нового! Вот разбивка новых концепций:

  1. Вы используете FlexColumn () для размещения панели приложений и списка рецептов.Столбец FlexColumn похож на обычный столбец Column , за исключением того, что он использует гибкую систему для компоновки и размера компонентов.

    Вы можете думать о flex как о LinearLayout s с отягощениями; то есть система, в которой размер элементов зависит от того, сколько других элементов находится в столбце.

  2. Вы не хотите изменять размер фактической панели инструментов с помощью гибкости - вместо этого вы хотите, чтобы она имела статическую высоту. Для этого нужно обернуть панель инструментов негибким вызовом .
  3. Затем вы используете TopAppBar () , чтобы создать представление в верхней части экрана, подобное панели инструментов в текущем наборе инструментов пользовательского интерфейса.
  4. Наконец, вы добавляете свой RecipeList и приказываете ему расширяться, чтобы заполнить оставшееся пространство, задав ему значение гибкости 1.

Создайте и запустите, и вы увидите новую красивую панель инструментов в верхней части ComposeCookbook.


Поздравляем! Вы создали свое первое приложение с помощью Jetpack Compose.

Куда идти дальше?

Теперь вы испытали некоторые из последних и величайших изменений, происходящих в мире пользовательского интерфейса на Android.Но вы только прикоснулись к тому, что может предложить Compose, и многие из этих API-интерфейсов неизбежно кардинально изменятся, прежде чем библиотека станет стабильной.

Из этого урока вы узнали о:

  • Философия и мотивация Jetpack Compose.
  • Как создать составной объект с помощью аннотации @Composable .
  • Как предварительно просмотреть составной объект с помощью аннотации @Preview .
  • Основы компоновки составных элементов с использованием составного столбца Column composable.
  • Как добавить стиль темы к вашим компонентам с помощью метода + .

Чтобы узнать больше о Jetpack Compose, ознакомьтесь с официальной документацией разработчика.

Вы также можете увидеть некоторые из последних и замечательных элементов в действии, просмотрев пример приложения JetNews, которое разрабатывают и поддерживают некоторые авторы Jetpack Compose.

Вы также можете пройти курс Jetpack Compose Primer от нашей собственной команды видеокурсов! Он охватывает большую часть того, что вы рассмотрели в этом руководстве, но затрагивает некоторые детали FlexRow .Вы также можете посмотреть его, чтобы повторить то, что вы узнали здесь, на другом примере! :]

Надеемся, вам понравился этот урок! Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь присоединиться к обсуждению на форуме ниже.

raywenderlich.com Еженедельно

Информационный бюллетень raywenderlich.com - это самый простой способ оставаться в курсе всего, что вам нужно знать как разработчику мобильных приложений.

Получайте еженедельный дайджест наших руководств и курсов, а в качестве бонуса получите бесплатный углубленный курс по электронной почте!

.

Смотрите также