Die Anleitung zu Flutter ContinuousRectangleBorder

ContinuousRectangleBorder
Examples
side
borderRadius

1. ContinuousRectangleBorder

ContinuousRectangleBorder erstellt einen rechteckigen Rand mit glatten kontinuierlich Übergängen zwischen gerade Kanten und abgerundeten Ecken.

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}
)

Im Grunde ist die Verwendungsweise von ContinuousRectangleBorder gleich wie RoundedRectangleBorder. Sie erstellt einen rechteckigen Rand mit der gerundeten Ecke. Allerdings sind die durch ContinuousRectangleBorder erstellten abgerundeten Ecke glatter.

Die Anleitung zu Flutter RoundedRectangleBorder

2. Examples

Z.B: Verwenden Sie ContinuousRectangleBorder für einen 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)
      )
  ),
)

Verwenden Sie den Operator Addition ( + ) um 2 ShapeBorder zur Erstellung eines kombinierten Rand zu additiern:

(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 - bietet die Parameter für den Rand wie Farbe, Breite, und Stil an.

BorderSide side: BorderSide.none

BorderSide constructor

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

Die Anleitung zu Flutter BorderSide

Hinweis: Das Property ContinuousRectangleBorder.side arbeitet mit ElevatedButton, TextButton und OutlinedButton nicht. Es wird durch ButtonStyle.side überschrieben.

4. borderRadius

borderRadius - bietet Sie den Wert für den 4-Ecken-Radius des Rechtecks an.

BorderRadiusGeometry borderRadius: BorderRadius.zero

Die Anleitung zu 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)
      )
  ),
)