BorderRadius是flutter一个内置的小工具。它的主要功能是在小部件的边框角周围添加曲线。共有五种方法可以使用此小部件，第一种是使用BorderRadius.all，此处所有拐角的半径均相同。第二种方法是使用BorderRadius.Circle，这里我们只需要指定一次半径，它将是一个双精度值。第三种方法是使用BorderRadius.horizontal，在这里我们可以为左侧和右侧指定不同的边框半径。 第四种方法是使用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.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小部件内， 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四个属性，以向边框的角添加特定数量的半径。左上角的半径为5像素，右上角的半径为10像素，左下角的边框半径为15像素，右下角的半径为20像素。
示例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像素。
要查看本文中使用的所有示例的完整代码，请单击此处。