Руководство Flutter ContinuousRectangleBorder

ContinuousRectangleBorder
Examples
side
borderRadius

1. ContinuousRectangleBorder

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

ShapeBorder
OutlinedBorder
RoundedRectangleBorder
StadiumBorder
CircleBorder
Border
BoxBorder
InputBorder
BorderDirectional
BeveledRectangleBorder
StadiumBorder
OutlineInputBorder
UnderlineInputBorder

ContinuousRectangleBorder constructor

const ContinuousRectangleBorder(
  {BorderSide side: BorderSide.none,
  BorderRadiusGeometry borderRadius: BorderRadius.zero}
)

В основном, использование ContinuousRectangleBorder такое же, как и RoundedRectangleBorder. Все они образуют прямоугольную границу с закругленными углами. Однако закругленные углы, созданные ContinuousRectangleBorder, более гладкие.

Руководство Flutter RoundedRectangleBorder

2. Examples

Например: Использовать ContinuousRectangleBorder для Container:

(ex1)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

Используем оператор сложения (+), чтобы добавить 2 ShapeBorders для создания ассоциативной границы:

(ex2)

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(16.0),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      ) + ContinuousRectangleBorder (
          borderRadius: BorderRadius.circular(32.0),
          side: BorderSide(
              width: 20,
              color: Colors.green
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)

3. side

side - предоставляет параметры, связанные с границей, такие как цвет, ширина, стиль.

BorderSide side: BorderSide.none

BorderSide constructor

const BorderSide (
    {Color color: const Color(0xFF000000),
    double width: 1.0,
    BorderStyle style: BorderStyle.solid}
)

Руководство Flutter BorderSide

Примечание: Свойство ContinuousRectangleBorder.side не работает с ElevatedButton, TextButton и OutlinedButton. Он переопределяется (override) ButtonStyle.side.

4. borderRadius

borderRadius - обеспечивает значения радиуса 4 углов прямоугольника.

BorderRadiusGeometry borderRadius: BorderRadius.zero

Руководство Flutter BorderRadiusGeometry

Container(
  width: 300,
  height: 150,
  decoration: ShapeDecoration(
      color: Colors.white,
      shape: ContinuousRectangleBorder (
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.zero,
              topLeft:   Radius.zero,
              bottomRight: Radius.circular(20),
              topRight: Radius.circular(45)
          ),
          side: BorderSide(
              width: 10,
              color: Colors.blue
          )
      )
  ),
  child: Center(
      child: Text(
          "Flutter",
          style: TextStyle(fontSize: 50)
      )
  ),
)