Кнопки с повышенными правами — важный компонент Flutter для создания интерактивных и визуально привлекательных пользовательских интерфейсов. По умолчанию Flutter предоставляет стандартный радиус для приподнятых кнопок, но иногда вам может потребоваться настроить форму кнопки в соответствии с вашими требованиями к дизайну. В этой статье мы рассмотрим различные методы настройки радиуса приподнятых кнопок во Flutter, сопровождаемые примерами кода.
- Использование виджета
ButtonStyle
.
Один из способов настроить радиус приподнятой кнопки — использовать виджетButtonStyle
. Этот виджет позволяет нам определить собственную форму кнопки. Вот пример:
ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
onPressed: () {
// Button action
},
child: Text('Custom Button'),
),
- Применение пользовательской темы:
Система тем Flutter позволяет нам определить пользовательскую тему кнопок, которую можно применять глобально ко всем кнопкам с повышенными правами в нашем приложении. Мы можем указать свойствоshape
темы кнопки, чтобы настроить радиус. Вот пример:
Theme(
data: ThemeData(
elevatedButtonTheme: ElevatedButtonThemeData(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
),
),
),
),
child: ElevatedButton(
onPressed: () {
// Button action
},
child: Text('Themed Button'),
),
),
- Создание пользовательского виджета кнопки.
Для большей гибкости мы можем создать собственный виджет кнопки, который инкапсулирует желаемую настройку радиуса. Вот пример:
class CustomButton extends StatelessWidget {
final double borderRadius;
final VoidCallback onPressed;
final String text;
const CustomButton({
required this.borderRadius,
required this.onPressed,
required this.text,
});
@override
Widget build(BuildContext context) {
return ElevatedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(borderRadius),
),
),
),
onPressed: onPressed,
child: Text(text),
);
}
}
// Usage:
CustomButton(
borderRadius: 20.0,
onPressed: () {
// Button action
},
text: 'Custom Widget Button',
),
Настроить радиус приподнятых кнопок во Flutter можно различными способами. Используя виджет ButtonStyle
, применяя собственную тему или создавая собственный виджет кнопки, разработчики могут легко адаптировать форму кнопки в соответствии с желаемым дизайном пользовательского интерфейса. Поэкспериментируйте с различными радиусами, чтобы найти идеальный вариант для ваших приложений Flutter.