Во Flutter класс BorderRadius используется для определения закругленных углов виджетов, таких как контейнеры, кнопки и изображения. Он предоставляет различные методы для создания различных типов радиусов границ. В этой статье мы рассмотрим несколько методов использования класса BorderRadius, а также примеры кода, которые помогут вам овладеть искусством создания закругленных углов в ваших приложениях Flutter.
- Использование BorderRadius.all:
Метод BorderRadius.all позволяет указать единый радиус границы для всех углов виджета. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(20)),
color: Colors.blue,
),
);
- Использование BorderRadius.circular:
Метод BorderRadius.circular создает круговой радиус границы для всех углов. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.red,
),
);
- Использование BorderRadius.only:
Метод BorderRadius.only позволяет указывать различные радиусы границ для определенных углов. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
bottomRight: Radius.circular(40),
),
color: Colors.green,
),
);
- Использование BorderRadius.elliptical:
Метод BorderRadius.elliptical создает эллиптический радиус границы для всех углов. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.elliptical(50, 100),
color: Colors.yellow,
),
);
- Использование BorderRadius.vertical:
Метод BorderRadius.vertical позволяет указать разные вертикальные радиусы для верхнего и нижнего углов. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(30),
bottom: Radius.circular(60),
),
color: Colors.orange,
),
);
- Использование BorderRadius.horizontal:
Метод BorderRadius.horizontal позволяет указать разные горизонтальные радиусы для левого и правого углов. Вот пример:
Container(
width: 200,
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(40),
right: Radius.circular(80),
),
color: Colors.purple,
),
);
В этой статье мы рассмотрели различные методы, предоставляемые классом BorderRadius во Flutter, для создания различных типов радиусов границ. Мы рассмотрели примеры использования BorderRadius.all, BorderRadius.circular, BorderRadius.only, BorderRadius.elliptical, BorderRadius.vertical и BorderRadius.horizontal. Обладая этими знаниями, вы теперь можете повысить визуальную привлекательность своих приложений Flutter, применяя к виджетам закругленные углы.
Не забывайте экспериментировать с различными значениями и комбинациями, чтобы добиться желаемого вида компонентов пользовательского интерфейса. Приятного программирования с Flutter!