Flutter – BorderDirectional小部件

BorderDirectional是flutter SDK中的内置小部件。该小部件与Border小部件有些相似，主要区别在于包含了start和end属性，该属性使用户可以根据文本方向从右到左(rtl)或从左到右(ltr)修改边框。 。如果我们的开始和结束边界边相同，则应使用Border小部件，因为它将提供更好的性能优化。

BorderDirectional类的构造函数：

const BorderDirectional(
{BorderSide top: BorderSide.none,
BorderSide start: BorderSide.none,
BorderSide end: BorderSide.none,
BorderSide bottom: BorderSide.none}
)

BorderDirectional小部件的属性：

• bottom：此属性将BorderSide (final)作为对象。它控制边框的底部。
• 尺寸：尺寸属性将EdgeInsetsGeometry作为对象来控制边框侧面的宽度。
• end：此属性将BorderSide作为对象。它控制边框的末端(取决于文本方向是右侧还是左侧)。
• hashCode：此属性将一个int值(重写)作为对象。这负责对象的状态表示。
• isUniform：此属性采用一个布尔值(只读，重写)作为对象，以决定边框的所有边是否均匀。
• start：此属性将BorderSide作为对象。它控制边框的开始侧(取决于文本方向是向右还是向左)。
• top：该属性将BorderSide (最终)作为对象。它控制边框的顶部。

示例1：在此应用程序中，当文本方向从左到右设置时，我们将看到如何使用开始和结束属性。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.ltr,
          child: child,
        ); //Directionality
      },
      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'), //NetworkImage
                  ), //DecorationImage
                  border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    end: BorderSide(
                        color: Colors.blue,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

输出：

文字方向从左到右设置

说明：在这个简单的flutter应用程序中， MaterialApp的builder属性内部的文本方向设置为TextDirection.ltr，这将使文本方向从左到右(默认情况下仅设置为ltr )。在BorderDirectonal小部件内 start和end属性使用BorderSide小部件作为对象。在这两个属性的BorderSide小部件中，边框的颜色分别设置为绿色和蓝色，宽度分别为4像素，样式设置为纯色。现在，要注意的是实际上分配给start属性的绿色边框位于屏幕的左侧。蓝色边框位于图像的右侧。这是由于文本方向是从左到右的原因，这意味着文本从左到右开始打印，因此边框开始打印。

示例2：在此应用程序中，当文本方向设置为从右到左时，我们将看到如何使用开始和结束属性。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(
    MaterialApp(
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          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: 250,
              child: Container(
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: NetworkImage(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
                  ), //DecorationImage
                  border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //Borderside
                    end: BorderSide(
                        color: Colors.blue,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

输出：

开始和结束属性

说明：此应用程序也与上一个应用程序类似，不同之处在于文本方向设置为rtl (从右到左)。通过查看代码，我们可以看到BorderDirectionl小部件也与前面的示例相同。但是在输出中，我们可以看到这次绿色边框打印在右侧，蓝色边框打印在左侧。同样，原因是文本方向是从左到右。

示例3：在此示例中，我们将看到如何使用BorderDirectional小部件在图像周围的所有方向添加边框。

// Code Snippet Border     
                   ...
                   border: BorderDirectional(
                    start: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    end: BorderSide(
                        color: Colors.blue,
                        width: 8,
                        style: BorderStyle.solid), //BorderSide
                    top: BorderSide(
                        color: Colors.green,
                        width: 4,
                        style: BorderStyle.solid), //BorderSide
                    bottom: BorderSide(
                        color: Colors.blue,
                        width: 8,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                  ...

输出：

四面八方接壤

说明：在此应用中，未提及文本方向，默认情况下，其设置为ltr (从左到右)。看一下代码片段，我们可以看到start和top属性是相同的，而end和bottom属性是相同的。在top和start属性中，颜色设置为绿色，宽度设置为4像素，边框样式设置为纯色。在边框的底端和底部，颜色设置为蓝色，宽度设置为8像素，样式再次设置为纯色。

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处，前往由我们的专家精心策划的指南，以使您立即做好行业准备！