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 小工具
这就是我们的边界现在的样子。让我们看看如何向角添加曲线。
示例 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添加的。 B orderRadius.all将Radius.circular作为对象，10 是分配给它的参数。我们可以看到半径为 10 像素的曲线已添加到所有角。
示例 2：BorderRadius.circle
// Code snippet of the BorderRadius.Circular
...
borderRadius: BorderRadius.circular(50.0),
...
输出：
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小部件内， 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接受四个属性，分别是topLeft 、 topRight 、 bottomLeft和bottomRight以向边框中的角添加特定数量的半径。左上角的半径为 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是此处用于向角添加边框半径的小部件。它采用顶部和底部半径来指定边框的上部和下部的边框半径。这里添加到上部的边框半径为 10 像素，添加到下部的边框半径为 30 像素。
要查看本文中使用的所有示例的完整代码，请单击此处。