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

CircleBorder
Examples
side

1. CircleBorder

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

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

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

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

CircleBorder constructor

const CircleBorder(
    {BorderSide side: BorderSide.none}
)

2. Examples

(ex1)

Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)

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

(ex2)

Container(
    width: 150,
    height: 300,
    child: Center(
        child: Text(
            "GO",
            style: TextStyle(fontSize: 50)
        )
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        ) +  CircleBorder (
            side: BorderSide(
                width: 20,
                color: Colors.green
            )
        )
    )
)

Например, создаем простой Avatar:

(ex3)

Container(
    width: 200,
    height: 200,
    child: Center(
        child: Image.network("https://s3.o7planning.com/images/boy-128.png")
    ),
    decoration: ShapeDecoration(
        color: Colors.white,
        shape: CircleBorder (
            side: BorderSide(
                width: 10,
                color: Colors.blue
            )
        )
    )
)

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

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

1. CircleBorder

2. Examples

3. side

Pуководства Flutter

Pуководства Flutter

Новейшие статьи