📜  Flutter – BorderSide 小部件

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

BorderSide部件在flutter是一个内置的小工具,其函数是控制的外观和感觉周围插件的边框各边的。 flutter的Border widget也以BorderSide为对象,代表各个边。

BorderSide 类的构造函数:

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

BorderSide 小部件的属性:

  • color: color属性将Color类(final)作为对象,为边框边指定颜色。
  • hashCode:此属性将一个int值(覆盖)作为对象。这负责对象的状态表示。
  • style: style属性以BorderStyle枚举为对象。借助此属性,我们可以控制绘制的边框线的样式。
  • 宽度:此属性采用双精度值作为对象。它控制分配给边框各边的宽度。

示例:在这里我们将看到为图像添加边框。

Dart
import 'package:flutter/material.dart';
  
void main() {
  runApp(
    MaterialApp(
      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: Container(
            padding: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                    width: 16.0,
                    color: Colors.lightGreen.shade300,
                    style: BorderStyle.solid), //BorderSide
              ), //Border
                
            ), //BoxDecoration
             //Image.network
            child: Image.network(
                'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), 
          ), //Container
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}


输出:

边界

说明:在这个应用程序中, BorderSide小部件作为对象放在顶部,这是Border小部件的一个属性,用于描述元素顶部的边框侧(或在这种情况下 geeksforgeeks 标志)。边框的宽度为 16.0 像素,颜色设置为lightGreen.shade300 ,最后样式属性设置为solid(使其可见)。

// style property set to none
   ... 
   style: BorderStyle.none  //BorderSide
   ...

如果样式属性设置如上。输出将是。

BorderStyle.none

BorderStyle.none

要添加底部边框,我们必须进行这些更改。

...
   border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                                

输出:

底部边框

下边框

这就是我们如何为图像添加左边框。

...
 border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                

输出:

左边框

左边框

而且,这就是我们如何使用BorderSide小部件在所有四个边上设置边框

...
 border: Border(
                  top: BorderSide(
                      width: 16.0,
                      color: Colors.lightGreen.shade300,
                      style: BorderStyle.solid),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                  right: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...

输出:

所有四个边的边界

所有四个边的边框

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