📜  Flutter – BorderDirectional 小部件

📅  最后修改于: 2021-09-02 05:18:43             🧑  作者: Mango

BorderDirectional是一个内置的widgetflutterSDK。这个小部件有点类似于Border小部件,主要区别在于包含startend属性,它允许用户根据从右到左(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
  );
}


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
  );
}


输出:

文本方向设置为从左到右。

文本方向设置为从左到右

说明:在这个简单的flutter应用程序中, MaterialAppbuilder属性内部的文本方向设置为TextDirection.ltr,这将使文本的方向从左到右(默认情况下仅设置为ltr )。在BorderDirectonal小部件内 startend 属性使用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 (从左到右)。查看代码片段,我们可以看到starttop属性相同,而endbottom属性相同。在topstart属性中,颜色设置为绿色,宽度为 4 像素,边框样式设置为纯色。在末端底部边框侧,颜色设置为蓝色,宽度设置为 8 像素,样式再次设置为纯色。

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!