Flutter – BoxShadow小部件

📌 相关文章

📜 Flutter – BoxShadow小部件

📅 最后修改于: 2021-05-20 06:53:32 🧑 作者: Mango

BoxShadow是flutter一个内置的小工具，其功能是将投射阴影，以一个盒子。 BoxShadow小部件通常与BoxDecoration一起使用。在BoxDecoration窗口小部件的参数之一是boxShadow这需要BoxShadow列表投周围的框阴影。

BoxShadow类的构造函数：

const BoxShadow(
{Color color: const Color(0xFF000000),
Offset offset: Offset.zero,
double blurRadius: 0.0,
double spreadRadius: 0.0}
)

BoxShadow小部件的属性：

blurRadius：此属性接受一个双精度值作为对象。它控制阴影边缘的模糊度。
blurSignma：此属性接受一个双精度值作为对象。它根据sigma而不是逻辑像素控制模糊半径。
color： color属性将Color类作为确定阴影颜色的对象。
offset： Offset类是赋予此属性的对象，该对象控制阴影的可见程度。
SpreadRadius：此属性还接受一个双精度值作为对象，以决定在应用模糊效果之前应将框充气的程度。

示例：在这里，我们将看到如何使用BoxDecoration内的BoxShadow小部件将阴影投射到框上。

这是BoxDecoration小部件，它具有图像和围绕它的边框。我们将看到如何在此框上应用阴影。

主要的。dart

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(
      
    //Our app widget tree starts herwe
    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: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 200,
              width: 250,
              child: Container(
                decoration: BoxDecoration(
                  image: const DecorationImage(
                    image: NetworkImage(
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
                    scale: 3.0,
                  ), //DecprationImage
                  border: Border.all(
                      color: Colors.green,
                      width: 4.0,
                      style: BorderStyle.solid), //Border.all
  
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(10.0),
                    topRight: Radius.circular(10.0),
                    bottomLeft: Radius.circular(10.0),
                    bottomRight: Radius.circular(10.0),
                  ),
                  //BorderRadius.only
                  /************************************/
                  /* The BoxShadow widget  is here */
                  /************************************/
                  boxShadow: [
                    BoxShadow(
                      color: Colors.greenAccent[200],
                      offset: const Offset(
                        5.0,
                        5.0,
                      ),
                      blurRadius: 10.0,
                      spreadRadius: 2.0,
                    ), //BoxShadow
                    BoxShadow(
                      color: Colors.white,
                      offset: const Offset(0.0, 0.0),
                      blurRadius: 0.0,
                      spreadRadius: 0.0,
                    ), //BoxShadow
                  ],
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false, 
      //Deug banner is turned off
    ), //MaterialApp
  );
}

输出：

移植：如前所述， BoxDecoration小部件具有一个名为boxShadow的参数，该参数将List ( BoxShadow小部件的列表)作为对象以向盒子投射阴影。列表中最顶部的窗口小部件显示在应用程序的最底部。

现在，看一下代码，我们可以看到列表中的第一个BoxShadow小部件被分配了greenAccent [400]的颜色，其作用类似于应用程序中盒子的实际阴影。然后我们将x轴和y轴的偏移都设置为5.0 ，这是绿色阴影将投射到的距离。然后我们将模糊半径设置为10，这会给阴影带来雾霾效果，然后将扩散半径设置为2。

在第二个BoxShadow小部件中，分配的颜色为白色，并且x轴和y轴的偏移都设置为零，这将使图像背景变为白色(这是原始颜色)。如果我们没有添加第二个BoxShadow小部件，那么输出将是下面的图像。

因此，这就是我们如何将Boxshadow添加到我们的flutter应用程序中。

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?