Добавление списка, раскрывающегося списка, поля со списком и переключателей в приложение на основе холста

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

• Список позволяет выбрать несколько элементов.
• Раскрывающийся список или поле со списком занимает меньше места на экране.
• Набор переключателей позволяет добиться определенного эффекта в дизайне.

В этой статье описываются списки и переключатели, но те же принципы применимы и к раскрывающимся спискам.

Предварительные условия

1. Создайте пустое приложение на основе холста.
2. Узнайте, как добавить и настроить элементы управления.

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

1. Добавьте элемент управления Список с именем MyListBox и присвойте его свойству Items следующее выражение:

   ["circle","triangle","rectangle"]
   

   Содержимое конструктора будет выглядеть примерно так:

   

2. На вкладке Вставка щелкните Значки, выберите кружок и переместите его под MyListBox:

   

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

   

4. Установите для свойства Visible (Видимость) фигур указанные ниже функции.

   Форма	Функция в свойстве Visible
   круг	If("circle" in MyListBox.SelectedItems.Value, true)
   треугольник	If("triangle" in MyListBox.SelectedItems.Value, true)
   прямоугольник	If("rectangle" in MyListBox.SelectedItems.Value, true)

5. Удерживая клавишу ALT, выберите одну или несколько фигур в MyListBox.

   Вы увидите только фигуры, которые выбираете.

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

Добавление переключателей

1. На вкладке Главная выберите Создать экран, а затем — Пустой.

2. На вкладке Вставка выберите Элементы управления, а затем — Переключатель.

   

3. Переименуйте переключатель в Варианты выбора и установите для свойства Items следующую формулу:
   ["red","green","blue"]
   

   

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

4. На вкладке Вставка выберите Значки, а затем — круг.

5. Установите для свойства Fill (Заливка) круга следующую функцию:
   If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

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

6. Переместите круг под элемент управления Переключатель, как в этом примере:

   

7. Удерживая клавишу ALT, выберите другой переключатель, чтобы изменить цвет кружка.

Добавить элемент в существующий список

1. Добавьте элемент управления Кнопка и назовите ее "btnReset".

   Не знаете, как добавить, назвать и настроить элемент управления?

2. Задайте свойство OnSelect как btnReset для этой формулы:

   ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
   

3. Задайте свойство Text для btnReset как "Reset".

4. Добавьте элемент управления Список с названием lbItems и установите его свойство Items как MyItems.

5. Удерживая клавишу ALT, нажмите кнопку Сброс.

   Примечание

   Список должен заполниться элементами из коллекции «MyItems».

6. Расположите список и кнопку так, чтобы они были выровнены по вертикали.

   

7. Добавьте элемент управления Текстовый ввод и назовите его "txtAdd".

8. Задайте свойство Text txtAdd как "".

9. Добавьте элемент управления Кнопка и назовите его "btnAdd".

10. Задайте свойство Text btnAdd как "Add".

11. Задайте для свойства OnSelect значение btnAdd для следующей формулы:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Примечание

    • Функция collect добавит текст из ввода текста как элемент в коллекцию.
    • Функция сброса вернет введенный текст в состояние по умолчанию.

12. Расположите txtAdd и btnAdd по вертикали под lbItems и btnReset.

    

13. Предварительно просмотрите приложение, нажав F5.

14. Добавьте текстовое значение в элемент управления вводом текста txtAdd.

15. Нажмите кнопку Добавить.

    Примечание

    Список должен заполниться элементами из коллекции MyItems.

(Необязательно) Удалить элемент из существующего списка

1. Добавьте элемент управления Кнопка и назовите его "btnDelete".

2. Задайте свойство Text btnDelete как "Delete".

3. Задайте для свойства OnSelect значение btnDelete для следующей формулы:

   Remove(MyItems, lbItems.Selected)
   

4. Расположите btnDelete вертикально под btnReset

   

5. Предварительно просмотрите приложение, нажав F5.

6. Нажмите кнопку «Сброс», чтобы сбросить список.

7. Нажмите элемент в списке, чтобы выбрать его.

8. Нажмите кнопку «Удалить», чтобы удалить элемент.