Flutter – BorderDirectional 小部件

BorderDirectional是一个内置的widgetflutterSDK。这个小部件有点类似于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 小部件的属性：

• 底部：此属性以BorderSide ( final ) 作为对象。它控制边框的底部。
• 维度：维度属性以EdgeInsetsGeometry为对象来控制边框边的宽度。
• end：该属性以BorderSide为对象。它控制边框的结束侧(右侧或左侧，取决于文本方向)。
• hashCode：此属性将一个 int 值(覆盖)作为对象。这负责对象的状态表示。
• isUniform：这个属性接受一个布尔值(只读，覆盖)作为决定边界的所有边是否统一的对象。
• start：该属性以BorderSide为对象。它控制边框的开始侧(右侧或左侧，取决于文本方向)。
• top：该属性以BorderSide (final) 为对象。它控制边框的顶部。

示例 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：在此应用程序中，我们将看到当文本方向设置为从右到左时如何使用 start 和 end 属性。

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 的基础知识吗?

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