📜  Flutter – 边框小部件

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

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

Border类的构造函数:

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

边框小部件的属性:

  • 底部:该属性以BorderSide为对象。它控制边框的底部。
  • 维度:维度属性以EdgeInsetsGeometry为对象来控制边框边的宽度。
  • hashCode: hashCode属性以int值作为对象。它表示影响运算符== 比较的对象的状态。
  • inUniform:这个属性接受一个布尔值作为对象来解码边界的所有边是否统一。
  • left:该属性以 BorderSide 为对象。它控制边框的左侧。
  • right:该属性以 BorderSide 为对象。它控制边界的右侧。
  • top:该属性以 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小部件中的边框属性的对象。此处使用第一种方法在 geeksforgeeks 徽标 ( NetworkImage)周围添加了边框。在使用顶部、底部、右侧和左侧属性的边框小部件中,边框的宽度设置为 4 像素,颜色设置为黑色,样式设置为纯色。在这种情况下,我们有能力使所有四个边界都不同,但为了简单起见,我们使它们都相似。

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

// 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,颜色为黑色,样式为纯色,水平属性也是如此。

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

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