Radiobutton это: Радиокнопка — что это такое? Определение, значение, перевод

Radiobutton и Checkbutton. Переменные Tkinter. Урок 5

В Tkinter от класса Radiobutton создаются радиокнопки, от класса Checkbutton – флажки.

Радиокнопки не создают по одной, а делают связанную группу, работающую по принципу переключателей. Когда включена одна, другие выключены.

Экземпляры Checkbutton также могут быть визуально оформлены в группу, но каждый флажок независим от остальных. Каждый может быть в состоянии «установлен» или «снят», независимо от состояний других флажков. Другими словами, в группе Checkbutton можно сделать множественный выбор, в группе Radiobutton – нет.

Radiobutton – радиокнопка

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

Эти переключатели никак не связаны друг с другом. Кроме того для них не указано исходное значение, должны ли они быть в состоянии «вкл» или «выкл». По-умолчанию они включены.

Связь устанавливается через общую переменную, разные значения которой соответствуют включению разных радиокнопок группы. У всех кнопок одной группы свойство variable устанавливается в одно и то же значение – связанную с группой переменную. А свойству value присваиваются разные значения этой переменной.

В Tkinter нельзя использовать любую переменную для хранения состояний виджетов. Для этих целей предусмотрены специальные классы-переменные пакета tkinter – BooleanVar, IntVar, DoubleVar, StringVar. Первый класс позволяет принимать своим экземплярам только булевы значения (0 или 1 и True или False), второй – целые, третий – дробные, четвертый – строковые.

r_var = BooleanVar()
r_var.set(0)
r1 = Radiobutton(text='First',
                 variable=r_var, value=0)
r2 = Radiobutton(text='Second',
                 variable=r_var, value=1)

Здесь переменной r_var присваивается объект типа BooleanVar. С помощью метода set он устанавливается в значение 0.

При запуске программы включенной окажется первая радиокнопка, так как значение ее опции value совпадает с текущим значением переменной r_var. Если кликнуть по второй радиокнопке, то она включится, а первая выключится. При этом значение r_var станет равным 1.

В программном коде обычно требуется «снять» данные о том, какая из двух кнопок включена. Делается это с помощью метода get экземпляров переменных Tkinter.

from tkinter import *
 
 
def change():
    if var.get() == 0:
        label['bg'] = 'red'
    elif var.get() == 1:
        label['bg'] = 'green'
    elif var.get() == 2:
        label['bg'] = 'blue'
 
 
root = Tk()
 
var = IntVar()
var.set(0)
red = Radiobutton(text="Red",
                  variable=var, value=0)
green = Radiobutton(text="Green",
                    variable=var, value=1)
blue = Radiobutton(text="Blue",
                   variable=var, value=2)
button = Button(text="Изменить",
                command=change)
label = Label(width=20, height=10)
red.  pack()
green.pack()
blue.pack()
button.pack()
label.pack()
 
root.mainloop()
 

В функции change в зависимости от считанного значения переменной var ход выполнения программы идет по одной из трех веток.

Мы можем избавиться от кнопки «Изменить», связав функцию change или любую другую со свойством command радиокнопок. При этом не обязательно, чтобы радиокнопки, объединенные в одну группу, вызывали одну и ту же функцию.

from tkinter import *
 
 
def red_label():
    label['bg'] = 'red'
 
 
def green_label():
    label['bg'] = 'green'
 
 
def blue_label():
    label['bg'] = 'blue'
 
 
root = Tk()
 
var = IntVar()
var.set(0)
Radiobutton(text="Red", command=red_label,
            variable=var, value=0).pack()
Radiobutton(text="Green", command=green_label,
            variable=var, value=1).pack()
Radiobutton(text="Blue", command=blue_label,
            variable=var, value=2).pack()
label = Label(width=20, height=10, bg='red')
label.
  pack()
 
root.mainloop()

Здесь метка будет менять цвет при клике по радиокнопкам.

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

from tkinter import *
 
 
def paint(color):
    label['bg'] = color
 
 
class RBColor:
    def __init__(self, color, val):
        Radiobutton(
            text=color.capitalize(),
            command=lambda i=color: paint(i),
            variable=var, value=val).pack()
 
 
root = Tk()
 
var = IntVar()
var.set(0)
RBColor('red', 0)
RBColor('green', 1)
RBColor('blue', 2)
label = Label(width=20, height=10, bg='red')
label.pack()
 
root.mainloop()

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

Checkbutton – флажок

Флажки не требуют установки между собой связи, поэтому может возникнуть вопрос, а нужны ли тут переменные Tkinter? Они нужны, чтобы снимать сведения о состоянии флажков. По значению связанной с Checkbutton переменной можно определить, установлен флажок или снят, что в свою очередь повлияет на ход выполнения программы.

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

from tkinter import *
root = Tk()
 
 
def show():
    s = f'{var1.get()}, ' \
        f'{var2.get()}'
    lab['text'] = s
 
 
frame = Frame()
frame.pack(side=LEFT)
 
var1 = BooleanVar()
var1.set(0)
c1 = Checkbutton(frame, text="First",
                 variable=var1,
                 onvalue=1, offvalue=0,
                 command=show)
c1.
 
  pack(anchor=W, padx=10)
 
var2 = IntVar()
var2.set(-1)
c2 = Checkbutton(frame, text="Second",
                 variable=var2,
                 onvalue=1, offvalue=0,
                 command=show)
c2.pack(anchor=W, padx=10)
 
lab = Label(width=25, height=5, bg="lightblue")
lab.pack(side=RIGHT)
 
root.mainloop()

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

Опцию offvalue можно не указывать. Однако при ее наличии можно отследить, выключался ли флажок.

С помощью методов select и deselect флажков можно их программно включать и выключать. То же самое относится к радиокнопкам.

from tkinter import *
 
 
class CheckButton:
    def __init__(self, master, title):
        self.
  var = BooleanVar()
        self.var.set(0)
        self.title = title
        self.cb = Checkbutton(
            master, text=title, variable=self.var,
            onvalue=1, offvalue=0)
        self.cb.pack(side=LEFT)
 
 
def ch_on():
    for ch in checks:
        ch.cb.select()
 
 
def ch_off():
    for ch in checks:
        ch.cb.deselect()
 
 
root = Tk()
 
f1 = Frame()
f1.pack(padx=10, pady=10)
checks = []
for i in range(10):
    checks.append(CheckButton(f1, i))
 
f2 = Frame()
f2.pack()
button_on = Button(f2, text="Все ВКЛ",
                   command=ch_on)
button_on.pack(side=LEFT)
button_off = Button(f2, text="Все ВЫКЛ",
                    command=ch_off)
button_off.pack(side=LEFT)
 
root.mainloop()

Практическая работа

Виджеты Radiobatton и Checkbutton поддерживают большинство свойств оформления внешнего вида, которые есть у других элементов графического интерфейса. При этом у Radiobutton есть особое свойство

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

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

Помните, что свойство command есть не только у виджетов класса Button.

Курс с примерами решений практических работ: pdf-версия, android-приложение.

Python и Tkinter | Radiobutton

Последнее обновление: 13.09.2022

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

Среди параметров конструктора Radiobutton стоит выделить следующие:

• command: ссылка на функцию, которая вызывается при нажатии на переключатель

• cursor: курсор при наведении на виджет

• image: графическое изображение, отображаемое виджетом

• padding: отступы от содержимого до границы переключателя

• state: состояние виджета, может принимать значения NORMAL (по умолчанию), DISABLED и ACTIVE

• text: текст виджета

• textvariable: устанавливает привязку к переменной StringVar, которая задает текст переключателя

• underline: индекс подчеркнутого символа в тексте виджета

• variable: ссылка на переменную, как правило, типа IntVar, которая хранит состояние переключателя

• value: значение переключателя

• width: ширина виджета

Определим группу переключателей:

from tkinter import *
from tkinter import ttk

root = Tk()
root. title("METANIT.COM")
root.geometry("250x200")

position = {"padx":6, "pady":6, "anchor":NW}

python = "Python"
java = "Java"
javascript = "JavaScript"

lang = StringVar(value=java)    # по умолчанию будет выбран элемент с value=java

header = ttk.Label(textvariable=lang)
header.pack(**position)
 
python_btn = ttk.Radiobutton(text=python, value=python, variable=lang)
python_btn.pack(**position)
 
javascript_btn = ttk.Radiobutton(text=javascript, value=javascript, variable=lang)
javascript_btn.pack(**position)

java_btn = ttk.Radiobutton(text=java, value=java, variable=lang)
java_btn.pack(**position)
 
root.mainloop()

Здесь определено три переключателя. Все они привязаны к одной переменной lang, которая представляет тип StringVar. При этом они имеют разные значения, устанавливаемые через параметр value. Начальное значение переменной lang («java») соответствует значению value последнего переключателя, поэтому по умолчанию будет выбран последний переключатель. А при выборе одного переключателя, другой автоматически перейдет в неотмеченное состояние.

Для вывода выделенного значения над переключателями определена текстовая метка, которая отображает значение переменной lang:

В примере выше отображаемый текст (параметр text) и значение (параметр value) совпадают, но это необязательно

Обработка выбора пользователя

Параметр command позволяет установить функцию, которая обрабатывает выбор переключателя. Например:

from tkinter import *
from tkinter import ttk

root = Tk()
root.title("METANIT.COM")
root.geometry("250x200")

position = {"padx":6, "pady":6, "anchor":NW}
languages = ["Python", "JavaScript", "Java", "C#"]
selected_language = StringVar()    # по умолчанию ничего не выборанно

header = ttk.Label(text="Выберите язык")
header.pack(**position)

def select():
    header.config(text=f"Выбран {selected_language.get()}")

for lang in languages:
    lang_btn = ttk. Radiobutton(text=lang, value=lang, variable=selected_language, command=select)
    lang_btn.pack(**position)
 
root.mainloop()

Здесь для упрощения данные переключателей определены в виде списка languages. В цикле for пробегаемся по всем элементам списка и создаем переключатель. При нажатии на каждый переключатель будет срабатывать функция select(), которая установит для метки header соответствующий текст:

Установка изображения

Для установки изображения применяется параметр image:

from itertools import chain
from tkinter import *
from tkinter import ttk

root = Tk()
root.title("METANIT.COM")
root.geometry("250x200")

position = {"padx":6, "pady":6, "anchor":NW}

python = "Python"
java = "Java"
csharp = "C#"

lang = StringVar(value=java)    # по умолчанию будет выбран элемент с value=java

header = ttk.Label(textvariable=lang)
header. pack(**position)

python_img = PhotoImage(file="./python_sm.png")
csharp_img = PhotoImage(file="./csharp_sm.png")
java_img = PhotoImage(file="./java_sm.png")
 
python_btn = ttk.Radiobutton( value=python, variable=lang, image=python_img)
python_btn.pack(**position)
 
csharp_btn = ttk.Radiobutton(value=csharp, variable=lang, image=csharp_img)
csharp_btn.pack(**position)

java_btn = ttk.Radiobutton(value=java, variable=lang, image=java_img)
java_btn.pack(**position)
 
root.mainloop()

Параметру image передается объект PhotoImage, в конструкторе которого через параметр file устанавливается путь к изображению. Здесь предполагается, что в одной папке с файлом приложения находятся файлы изображений «python_sm.png», «csharp_sm.png» и «java_sm.png».

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

• top: изображение поверх текста

• bottom: изображение под текстом

• left: изображение слева от текста

• right: изображение справа от текста

• none: при наличии изображения отображается только изображение

• text: отображается только текст

• image: отображается только изображение

Например, отобразим картинку поверх текста:

from itertools import chain
from tkinter import *
from tkinter import ttk

root = Tk()
root. title("METANIT.COM")
root.geometry("250x200")

position = {"padx":6, "pady":6, "anchor":NW}

languages = [
    {"name": "Python", "img": PhotoImage(file="./python_sm.png")},
    {"name": "C#", "img": PhotoImage(file="./csharp_sm.png")},
    {"name": "Java", "img": PhotoImage(file="./java_sm.png")}
]


lang = StringVar(value=languages[0]["name"])    # по умолчанию будет выбран элемент с value=python

header = ttk.Label(textvariable=lang)
header.pack(**position)

for l in languages:
    btn = ttk.Radiobutton(value=l["name"], text=l["name"], variable=lang, image=l["img"], compound="top")
    btn.pack(**position)

root.mainloop()

НазадСодержаниеВперед

Флажки и радиокнопки

Сводка:  Рекомендации по пользовательскому интерфейсу, когда следует использовать элемент управления флажком и когда использовать элемент управления переключателем. Двенадцать проблем с юзабилити для флажков и переключателей.

Автор Якоб Нильсен

• Якоб Нильсен

на 2004-09-26 26 сентября 2004 г.

Темы:

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

• Дизайн приложения Дизайн приложения, 
• Веб-юзабилити,
• Дизайн взаимодействия

Поделиться этой статьей:

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

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

Ошибка № 2 заключается в том, что сначала нужно представить два вопроса, а затем поместить их в большой многословный ящик. Здесь лучше всего задать один короткий вопрос: «Да, пришлите мне информацию о других рекомендуемых продуктах, решениях, услугах и образовательных возможностях».

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

Когда использовать какие виджеты

Начиная с первого издания Inside Macintosh в 1984 году, правила использования флажков и переключателей были одинаковыми. Все последующие стандарты GUI и официальные веб-стандарты W3C включали одно и то же определение этих двух элементов управления:

.

1. Радиокнопки используются, когда есть список из двух или более вариантов, которые взаимоисключающие и пользователь должен выбрать ровно один вариант. Другими словами, щелчок по невыбранной радиокнопке приведет к отмене выбора любой другой кнопки, которая ранее была выбрана в списке.
2. Флажки используются, когда есть списки вариантов, и пользователь может выбрать любое количество вариантов, включая ноль, один или несколько. Другими словами, каждый флажок не зависит от всех других флажков в списке, поэтому установка одного флажка не снимает другие.
3. Отдельный флажок используется для одного параметра, который пользователь может включить или отключить.

Звучит достаточно просто, правда?

Тем не менее, я часто сталкиваюсь с веб-страницами, которые неправильно используют переключатели и флажки. Даже по прошествии двадцати лет стоит повторить эти рекомендации еще раз.

Дополнительные указания

4. Используйте стандартные визуальные представления. Флажок должен представлять собой небольшой квадрат, отмеченный галочкой или знаком X при выборе. Радиокнопка должна представлять собой небольшой кружок, внутри которого при выборе находится сплошной круг.
5. Визуально представить группы выбора как группы, и четко отделить их от других групп на той же странице. Приведенный выше пример в рамке нарушает это правило, потому что макет создает впечатление, что два флажка относятся к разным темам, хотя на самом деле они представляют собой альтернативные варианты для одной темы.
   • Используйте подзаголовки, чтобы разбить длинный список флажков на логические группы. Это делает выбор более быстрым для сканирования и более легким для понимания. Риск заключается в том, что пользователи могут рассматривать каждую подгруппу как отдельный набор параметров, но это не обязательно фатально для флажков — каждый флажок в любом случае является независимым выбором. Однако список переключателей всегда должен выглядеть единым, чтобы его нельзя было разбить на подзаголовки.
6. Располагайте списки вертикально , по одному варианту на строку. Если вы должны использовать горизонтальную компоновку с несколькими вариантами в строке, обязательно разместите кнопки и метки так, чтобы было совершенно ясно, какой вариант соответствует какой метке. В следующем списке, например, трудно увидеть правильный переключатель, чтобы выбрать четвертый вариант.

   Один Два Три Четыре Пять Шесть Семь

7. Использовать позитивную и активную формулировку для меток флажков, чтобы было понятно, что произойдет, если пользователь установит флажок. Другими словами, избегайте отрицаний, таких как «Больше не присылать мне электронные письма», что означало бы, что пользователь должен будет установить флажок, чтобы произошло что-то , а не .
   • Напишите метки для флажков, чтобы пользователи знали, что произойдет, если они отметят конкретный флажок, и что произойдет, если они не отметят его.
   • Если вы не можете этого сделать, лучше использовать два переключателя — один для включения функции и один для ее отключения — и написать четкие метки для каждого из двух случаев.
8. По возможности используйте переключатели, а не раскрывающиеся меню . Радиокнопки имеют меньшую когнитивную нагрузку, потому что они делают все варианты постоянно видимыми, чтобы пользователи могли легко их сравнивать. Радиокнопки также удобнее для пользователей, которым трудно выполнять точные движения мышью. (Ограниченное пространство может иногда вынуждать вас нарушать это правило, но старайтесь, чтобы варианты выбора были видны, когда это возможно. )
9. Всегда предлагать выбор по умолчанию для списков переключателей . По определению, у радиокнопок всегда выбран только один параметр, и поэтому вы не должны отображать их без выбора по умолчанию. (Флажки, напротив, часто по умолчанию не выбирают ни один из параметров.)
   • Если пользователям может потребоваться воздержаться от выбора, вы должны предоставить переключатель для этого выбора, например, с пометкой «Нет». Предложение пользователям явного, нейтрального варианта клика лучше, чем требование неявного отказа от выбора из списка, особенно потому, что выполнение последнего нарушает правило, согласно которому всегда должен быть выбран только один вариант.
10. Поскольку радиокнопки требуют только одного выбора, убедитесь, что варианты являются исчерпывающими и четко различаются . Например, в тестах с более старшими пользователями люди не могли заполнить форму, которая требовала от них выбора работы, потому что она не предлагала вариант «пенсионер». Если невозможно быть исчерпывающим, предложите кнопку с надписью «Другое», дополненную полем для ввода.
11. Разрешить пользователям выбирать параметр, щелкнув либо саму кнопку/поле, либо ее метку : цель большего размера быстрее щелкнуть в соответствии с законом Фиттса. В формах HTML вы можете легко добиться этого, закодировав каждую метку элементами , как я сделал для примера с горизонтальными переключателями выше (чтобы выбрать эту опцию, щелкните слово «Четыре»). При тестировании веб-приложений во Flash мы обнаружили, что пользовательские ошибки еще больше уменьшаются за счет широких зон кликов, которые выходят на несколько пикселей за пределы видимой области клика. (Этого эффекта трудно добиться в HTML, хотя некоторые приемы CSS могут сработать.)
12. Используйте флажки и переключатели только для изменения настроек, а не в качестве кнопок действий , которые что-то делают. Кроме того, измененные параметры не должны вступать в силу до тех пор, пока пользователь не нажмет командную кнопку (например, с надписью «ОК» или «Перейти к XXX», где «XXX» — это следующий шаг в процессе).
    • Если пользователь нажимает кнопку Назад , любые изменения, внесенные в флажки или переключатели на странице, должны быть отменены и восстановлены исходные настройки. Тот же принцип, очевидно, остается в силе, если пользователь нажимает Кнопка «Отмена» (хотя навигационные веб-страницы не нуждаются в опции отмены, поскольку кнопка «Назад» служит той же цели).
    • Если пользователь сначала нажимает Назад , а затем Вперед , то наиболее уместно интерпретировать эту последовательность как пару Отменить-Повторить, что означает, что внешний вид элементов управления должен отображать изменения пользователя, как если бы пользователь никогда не нажимал Назад . Эти изменения по-прежнему не должны вступать в силу на серверной части, пока пользователь не нажмет «ОК» или аналогичную команду.

Почему эти рекомендации важны

Я просто придираюсь, когда настаиваю на правильном использовании флажков и переключателей? Нет. Есть веские причины следовать стандартам графического интерфейса и правильно использовать элементы управления.

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

Поскольку многие люди знают, как работать со стандартными виджетами графического интерфейса пользователя, правильное использование этих элементов дизайна повышает у пользователей ощущение мастерства в технологии. И наоборот, нарушение стандартов делает пользовательский интерфейс хрупким — как будто что-то может произойти без предупреждения. Скажем, например, что вы предполагаете, что можете щелкнуть переключатель без какого-либо немедленного воздействия и, таким образом, можете обдумать свой выбор после выбора, но до нажатия «ОК». В таком случае это раздражает, когда веб-сайт нарушает этот стандарт и неожиданно перемещает вас на следующую страницу после ввода выбора. Хуже того, это заставляет вас бояться того, что может произойти, когда вы работаете с формами в других местах сайта.

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

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