Flutter - виджет BorderRadius

Опубликовано: 15 Декабря, 2021

BorderRadius - это встроенный виджет во флаттере. Его основная функция заключается в добавлении кривой вокруг угла границы виджета. Всего есть пять способов использования этого виджета, первый - с помощью BorderRadius.all, радиус всех углов здесь одинаковый. Второй способ - использовать BorderRadius.Circle, здесь нам нужно указать радиус только один раз, что будет двойным значением. Третий способ - использовать BorderRadius.horizontal, здесь мы можем указать разные границы радиуса для левой и правой стороны. Четвертый способ - использовать только BorderRadius. Он может принимать разные радиусы для всех четырех углов границы. И последний способ - использовать BorderRadius.vertical , который может дать разный радиус верхней и нижней части границы. Реализация всех этих способов показана ниже на примерах.

Конструктор BordeRadius.all :

 const BorderRadius.all (
Радиус радиуса
)

Конструктор BorderRadius.Circle :

 BorderRadius.circular (
двойной радиус
)

Конструктор BorderRadius.horizontal :

 const BorderRadius.horizontal (
{Радиус слева: Radius.zero,
Радиус справа: Radius.zero}
)

Конструктор BorderRadius.only :

 const BorderRadius.only (
{Radius topLeft: Radius.zero,
Радиус topRight: Radius.zero,
Radius bottomLeft: Radius.zero,
Radius bottomRight: Radius.zero}
)

Конструктор BorderRadius.vertical :

 const BorderRadius.vertical (
{Верхний радиус: Radius.zero,
Нижний радиус: Radius.zero}
)

Свойства BorderRadius:

bottomLeft: свойство bottomLeft принимает в качестве объекта класс Radius. Он контролирует радиус нижнего левого угла границы.

 // Реализация
      конечный радиус снизу влево

bottomRight: это свойство также содержит Radius как объект, определяющий радиус нижнего правого угла границы.
topLeft: это свойство также содержит класс Radius как объект, определяющий радиус верхнего левого угла границы.
topRight: это свойство также содержит класс Radius как объект, определяющий радиус правого верхнего угла границы.

Теперь мы посмотрим, как мы можем добавить border-radius к границе, используя все методы. Граница в приложении ниже создается с помощью виджета Border.all вокруг NetworkImage, который помещается внутри виджета BoxDecoration.

Виджет BorderRadius

Так теперь выглядит наша граница. Давайте посмотрим, как добавить кривую к углам.

Пример 1: BorderRadius.all

Дротик

 import 'package:flutter/material.dart' ;
 
void main() {
  runApp(
    //Our app widget tree starts herwe
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text( 'GeeksforGeeks' ),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu' ,
            onPressed: () {},
          ), //IcoButton
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment' ,
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
        ), //AppBar
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 250,
              child: Container(
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: NetworkImage(
                        ' https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png ' ),
                  ),
                  border: Border.all(
                      color: const Color(0xFF000000),
                      width: 4.0,
                      style: BorderStyle.solid), //Border.all
                  /*** The BorderRadius widget is here ***/
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ), //BorderRadius.all
                ), //BoxDecoration
              ),
            ),
          ),
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false , //Debug banner is turned off
    ), //MaterialApp
  );
 }

Выход:

BorderRadius.all

Объяснение: Кривая вокруг углов границ в приведенном выше приложении была добавлена с помощью BorderRadius.all. B orderRadius.all принимает Radius.circular в качестве объекта, а 10 - это параметр, назначенный ему. И мы видим, что кривая радиусом 10 пикселей была добавлена ко всем углам.

Пример 2: BorderRadius.circle

 // Фрагмент кода BorderRadius.Circular
        ...
         borderRadius: BorderRadius.circular (50.0),
         ...

Выход:

BorderRadius.circular

Объяснение: Приведенный выше фрагмент кода относится к BorderRadius.circular. Он принимает только двойное значение в качестве объекта, чтобы дать равную кривую для всех углов границы. В приведенном выше приложении радиус установлен на 50 пикселей.

Пример 3: BorderRadous.horizontal:

 // Сиппет кода BorderRadius.horizontal
        ...
                  borderRadius: BorderRadius.horizontal (
                    слева: Radius.circular (15),
                    справа: Radius.circular (30),
                  ), //BorderRadius.horizontal
                 ...

Выход:

BorderRadius.horizontal

Объяснение: Здесь BorderRadius.horizontal был использован для добавления границы вокруг углов. Внутри виджета BorderRadius.horizontal свойство left содержит Radius.circular (15), что дает левой стороне границы (т. Е. Верхний левый и нижний -левый) радиус 15 пикселей, а свойство right содержит Radius. .circular (30), что, в свою очередь, дает правой части границы радиус 30 пикселей.

Пример 4: BorderRadus.only

 // Кодовая трубка BorderRadius.only
        ...
                  borderRadius: BorderRadius.only (
                    topLeft: Radius.circular (5),
                    topRight: Radius.circular (10),
                    bottomLeft: Radius.circular (15),
                    bottomRight: Radius.circular (20),
                  ), // BorderRadius.Only
        ...

Выход:

BorderRadius.only

Объяснение: В приведенном выше приложении BorderRadius.only используется для добавления различных кривых вокруг разных углов границ. BorderRadius.only принимает четыре свойства: topLeft , topRight , bottomLeft и bottomRight, чтобы добавить определенный радиус к углам границы. В верхнем левом углу радиус составляет 5 пикселей, в верхнем правом углу - 10 пикселей, в нижнем левом углу радиус границы - 15 пикселей, а в правом нижнем углу - 20 пикселей.

Пример 5: BorderRadius.vertical

 // Приемник кода BorderRadius.vertical
...
                  borderRadius: BorderRadius.vertical (
                    верх: Radius.circular (10),
                    внизу: Radius.circular (30),
                  ), // BorderRadius.vertical
        ...

Выход:

BorderRadius.vertical

Объяснение: BorderRadius.vertical - это виджет, используемый здесь для добавления радиуса границы к углам. Чтобы указать радиус границы для верхней и нижней части границы, требуется верхний и нижний радиус. Здесь радиус границы, добавленный к верхней части, составляет 10 пикселей, а радиус границы, добавленный к нижней части, составляет 30 пикселей.

Чтобы увидеть полный код всех примеров, использованных в этой статье, щелкните здесь.

Хотите более динамичную и конкурентную среду для изучения основ Android?

Щелкните здесь, чтобы перейти к уникальному руководству, составленному нашими экспертами с целью мгновенно подготовить вашу отрасль!

Android Flutter Dart

Flutter - виджет BorderRadius

Конструктор BordeRadius.all :

Конструктор BorderRadius.Circle :

Конструктор BorderRadius.horizontal :

Конструктор BorderRadius.only :

Конструктор BorderRadius.vertical :

Свойства BorderRadius:

Дротик

РЕКОМЕНДУЕМЫЕ СТАТЬИ