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
);
} 输出：
说明：此应用程序中的文本方向或方向性指定为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小部件的示例。