Flutter – BorderSide 小部件

📌 相关文章

📜 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

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

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