📜  Flutter – BorderRadius 小工具

📅  最后修改于: 2021-09-23 06:32:40             🧑  作者: Mango

BorderRadius是flutter一个内置的小工具。它的主要功能是在小部件的边界角周围添加一条曲线。我们总共有五种方法可以使用这个小部件,第一种是使用BorderRadius.all,这里所有角的半径都相同。第二种方法是使用BorderRadius.Circle,这里我们只需要指定半径一次,这将是一个精度值。第三种方式是使用BorderRadius.horizontal,这里我们可以为左右两边指定不同的border-radius。 第四种方法是使用BorderRadius.only,它可以为所有四个边界角采用不同的半径。最后一种方法是使用BorderRadius.vertical ,它可以为边框的上部和下部提供不同的半径。下面通过示例展示了所有这些方法的实现。

BordeRadius.all 的构造函数

const BorderRadius.all(
Radius radius
)

BorderRadius.Circle 的构造函数

BorderRadius.circular(
double radius
)

BorderRadius.horizontal 的构造函数

const BorderRadius.horizontal(
{Radius left: Radius.zero,
Radius right: Radius.zero}
)

BorderRadius.only 的构造函数

const BorderRadius.only(
{Radius topLeft: Radius.zero,
Radius topRight: Radius.zero,
Radius bottomLeft: Radius.zero,
Radius bottomRight: Radius.zero}
)

BorderRadius.vertical 的构造函数

const BorderRadius.vertical(
{Radius top: Radius.zero,
Radius bottom: Radius.zero}
)

BorderRadius 的属性:

  • bottomLeft: bottomLeft属性以Radius类为对象。它控制边框左下角的半径。
// Implementation
      final Radius bottomLeft

  • bottomRight:该属性还持有Radius作为对象来决定边框右下角的半径。
  • topLeft:该属性还持有Radius类作为决定边框左上角半径的对象。
  • topRight:该属性还持有Radius类作为决定边框右上角半径的对象。

现在,我们将看看如何使用所有方法将 border-radius 添加到边框。下面的应用程序中的边框是使用Border.all小部件围绕放置在BoxDecoration小部件内的NetworkImage创建的。

BorderRadius 小工具

BorderRadius 小工具

这就是我们的边界现在的样子。让我们看看如何向角添加曲线。

示例 1:BorderRadius.all

Dart
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: [
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //[]
        ), //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

说明:上述应用中的边框拐角处的曲线是使用BorderRadius.all添加的 B orderRadius.allRadius.circular作为对象,10 是分配给它的参数。我们可以看到一条半径为 10 像素的曲线被添加到所有的角上。

示例 2:BorderRadius.circle

// Code snippet of the BorderRadius.Circular
        ...
         borderRadius: BorderRadius.circular(50.0),
         ...

输出:

BorderRadius.circular

BorderRadius.circular

说明:上面的代码片段是BorderRadius.circular。它只需要一个double值作为对象来为边界中的所有角提供相等的曲线。在上面的应用程序中,半径设置为 50 像素。

示例 3:BorderRadous.horizontal:

// Code sippet of BorderRadius.horizontal
        ...
                  borderRadius: BorderRadius.horizontal(
                    left: Radius.circular(15),
                    right: Radius.circular(30),
                  ), //BorderRadius.horizontal
                 ...

输出:

BorderRadius.horizontal

BorderRadius.horizontal

说明:这里的BorderRadius.horizontal已用于在角周围添加边框。在BorderRadius.horizontal小部件内, left属性持有Radius.circular(15),它使边框的左侧(即左上角和左下角)的半径为 15 像素,而right属性持有Radius .circular(30),它反过来使边框的右侧部分的半径为 30 像素。

示例 4:BorderRadus.only

// Code sippet of 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用于在边框的不同角周围添加不同的曲线。 BorderRadius.only接受四个属性,分别是topLefttopRightbottomLeftbottomRight以向边框中的角添加特定数量的半径。左上角的半径为 5px,右上角的半径为 10 px,左下角的边框半径为 15 px,右下角的半径为 20 px。

示例 5:BorderRadius.vertical

// Code sippet of BorderRadius.vertical
        ...
                  borderRadius: BorderRadius.vertical(
                    top: Radius.circular(10),
                    bottom: Radius.circular(30),
                  ),//BorderRadius.vertical
        ...

输出:

BorderRadius.vertical

  BorderRadius.vertical

说明: BorderRadius.vertical是此处用于向角添加边框半径的小部件。它采用顶部底部半径来指定边框的上部和下部的边框半径。这里添加到上部的边框半径为 10 像素,添加到下部的边框半径为 30 像素。

要查看本文中使用的所有示例的完整代码,请单击此处。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!