Flutter – BorderSide小部件

📌 相关文章

📜 Flutter – BorderSide小部件

📅 最后修改于: 2021-05-13 17:37:22 🧑 作者: Mango

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

BorderSide类的构造函数：

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

BorderSide小部件的属性：

color： color属性将Color类(最终)保存为对象，以将颜色分配给边框。
hashCode：此属性将一个int值(重写)作为对象。这负责对象的状态表示。
style： style属性以BorderStyle枚举为对象。借助此属性，我们可以控制绘制的边界线的样式。
width：此属性将double值用作对象。并且它控制分配给边框各面的宽度。

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

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 px，颜色设置为lightGreen.shade300 ，最后将style属性设置为solid(使其可见)。

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

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

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