BorderRadiusDirectional是flutter一个预建的小部件。它的功能类似于BorderRadius小部件，即围绕边框的角添加曲线。但是有一个区别，在BorderRadiusDirectional小部件中，我们可以根据文本方向指定角半径。当我们的flutter应用程序的文本方向取决于用户的某种用户输入(例如选择应用程序的语言)时，它会派上用场。在某种程度上，它与 BorderDirectional小部件。
共有五种实现BorderRadiusDirectional小部件的方法：
1. 构造函数 BorderRadiusDirectional.all ：
const BorderRadiusDirectional.all(
Radius radius
)2. BorderRadiusDirectional.circular 的构造函数：
BorderRadiusDirectional.circular(
double radius
)3. BorderRadius 的构造函数。水平：
const BorderRadiusDirectional.horizontal(
{Radius start: Radius.zero,
Radius end: Radius.zero}
)4. BorderRadiusDirectional.only 的构造函数：
const BorderRadiusDirectional.only(
{Radius topStart: Radius.zero,
Radius topEnd: Radius.zero,
Radius bottomStart: Radius.zero,
Radius bottomEnd: Radius.zero}
)5. BorderRadiusDirectional.vertical 的构造函数：
const BorderRadiusDirectional.vertical(
{Radius top: Radius.zero,
Radius bottom: Radius.zero}
)BorderRadiusDirectional 的属性
- bottomEnd： Radius类是此属性根据文本方向指定左下角或右下角的圆角半径的对象。
- botttomStart： Radius类是此属性采用的对象，用于根据文本方向指定左下角或右下角的圆角半径。
- topEnd： Radius类是此属性用于根据文本方向指定左上角或右上角的角半径的对象。对于ltr ，它将位于右上角，对于rtl ，它将位于右上角。
- topstart： Radius类是此属性用于根据文本方向指定左上角或右上角的角半径的对象。
示例：在此示例中，BorderRadiusDirectional.only 用于向边框的角添加曲线。
This would be our starting app. Here we will see how to use BorderRadiusDirectional, to add a radius to the borders around the image.
文本方向从左到右。
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
//Our app widget tree starts herwe
MaterialApp(
builder: (context, child) {
return Directionality(
//Here we can chande the directionality of our app
textDirection: TextDirection.ltr,
child: child,
); //Directionlity
},
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: 200,
width: 250,
child: Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
scale: 3.0,
),
border: Border.all(
color: Colors.green,
width: 4.0,
style: BorderStyle.solid), //Border.all
/* The BorderRadiusDirectional widget is here */
borderRadius: BorderRadiusDirectional.only(
topStart: Radius.circular(5.0),
topEnd: Radius.circular(10.0),
bottomStart: Radius.circular(15.0),
bottomEnd: Radius.circular(20.0),
) //BorderRadiusDirectional.only
), //BoxDecoration
), //Conatiner
), //SizedBox
), //Padding
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
//Deug banner is turned off
), //MaterialApp
);
} 输出：
说明：本应用中的文字方向或Directionality指定为ltr，即从左到右(默认相同)。在BoxDecoration小部件中，我们使用了borderRadius参数，该参数将BorderRadiusDirectional.only作为对象。
在BorderRadiusDirectional.only类中，我们的topStart属性将Radius.circlular(5.0)作为对象，这仅意味着它为角提供了 5 个像素的边框半径，在这种情况下是它的左上角(因为文本方向是ltr )。然后我们有topEnd属性，它为右上角提供 10 像素的边框半径。 bottomStart属性指定到左下角的半径为 15 像素，而bottomEnd属性指定到边框右下角的半径为 20 像素。
文本方向从右到左。
// Code snippet of Directionality
...
return Directionality(
//Here we can chande the directionality of our app
textDirection: TextDirection.ltr,
child: child,
); //Directionlity
},
...
// Code snippet of the BorderRadiusDirectionality.only
...
borderRadius: BorderRadiusDirectional.only(
topStart: Radius.circular(5.0),
topEnd: Radius.circular(10.0),
bottomStart: Radius.circular(15.0),
bottomEnd: Radius.circular(20.0),
) //BorderRadiusDirectional.only
...
输出：
说明：此应用程序的唯一区别是设置为rtl (从右到左)的方向性或文本方向。如果我们将输出与上述应用程序进行比较，我们可以看到 5 像素半径指定为右上角，这意味着它现在是topStart角。 topEnd角是左上角，半径为 10 px， bottomStart角是右下角，半径为 15 px， bottomEnd角是左下角，半径为 20 px。
因此，这是我们如何使用BorderRadiusDirectional小部件的示例。