📜  Flutter –边框小部件

📅  最后修改于: 2021-05-09 16:50:37             🧑  作者: Mango

为flutter的Border窗口小部件分配了一个简单的功能,可以向其他窗口小部件添加边框。首先是通过使用BorderSide创建所有边框第二种方法是使用Border.all创建具有相同颜色和宽度的统一边框。第三个是通过使用Border.fromBorderSide创建一个边都相同的边框。第四种方法是使用Border.symmetry使边框在垂直和水平方向上看起来对称。

边界类的构造函数:

const Border(
{BorderSide top: BorderSide.none,
BorderSide right: BorderSide.none,
BorderSide bottom: BorderSide.none,
BorderSide left: BorderSide.none}
)

Border.all的构造函数:

Border.all(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)

Border.fromBorderSide的构造方法:

const Border.fromBorderSide(
BorderSide side
)

边界的构造函数。对称:

const Border.symmetric(
{BorderSide vertical: BorderSide.none,
BorderSide horizontal: BorderSide.none}
)

边框小部件的属性:

  • bottom:此属性将BorderSide作为对象。它控制边框的底部。
  • 尺寸:尺寸属性将EdgeInsetsGeometry作为对象来控制边框侧面的宽度。
  • hashCode: hashCode属性以int值作为对象。它表示影响运算符==比较的对象的状态。
  • inUniform:此属性采用布尔值作为对象,以解码边界的所有侧面是否均匀。
  • 左:此属性将BorderSide作为对象。它控制边框的左侧。
  • 右:此属性将BorderSide作为对象。它控制边框的右侧。
  • 顶部:此属性将BorderSide作为对象。它控制边框的顶部。

例子 :

主要。dart文件

Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(
    MaterialApp( 
        
      // Our app starts here
      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( 
                    
                  //inside the bos decoration we have image 
                  image: const DecorationImage(
                    image: NetworkImage( 
                        
                      // The border will be createed around this image
                      //NetworkImage
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
                  ), //DecorationImage
                  border: Border(
                    top: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                    bottom: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                    left: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //Borderside
                    right: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      // The debug bnner is turned off
      debugShowCheckedModeBanner: false, 
    ), //MaterialApp
  );
}


输出:

说明:该flutter应用程序中的Border小部件已用作BoxDecoration小部件中border属性的对象。在这里,使用第一种方法在geeksforgeeks徽标( NetworkImage)周围添加了边框。在使用top,bottom,right和lef t属性的Border小部件中,边框的宽度设置为4 px,颜色设置为黑色,样式设置为纯色。在这种情况下,我们可以使所有四个边界都不同,但是为了简单起见,我们使它们都相似。

这是我们将使用其余三种方法实现的相同输出。

// This is the code snippet of Border.all method
...
border: Border.all(
color: const Color(0xFF000000),
width: 4.0,
style: BorderStyle.solid), //Border.all
), //BoxDirection
...

输出:

说明:在这里,在第二种方法中,我们使用Border.all在图像周围绘制了边框使用此方法,我们只需要为边框指定一次。在这里,边框的宽度也是4 px,颜色设置为黑色,样式设置为纯色。如果将样式设置为无,则边框将不再可见。该属性用于创建具有相同颜色和宽度的边框。

// This is the code snippet of Border.fromBorderSide method
...
border: Border.fromBorderSide(
BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid),//BorderSide
),//Border.fromBorderside
...

输出:

说明:现在,这种通过使用Border.fromBorderSide创建边框的方法也类似于上一种方法。

// This is the code snippet of Border.symmetric method
...
border: Border.symmetric(
vertical: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
horizontal: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
), //Border.symmetric
...

输出:

说明:在这里,我们具有Border.symmetric属性,可以使用它创建一个垂直和水平相同的边框。在vertical属性中,我们添加了指定的边框宽度为4 px,颜色为黑色,样式为实心,与horizontal属性相同。

要查看本文中使用的所有示例的完整代码,请单击此处。

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