Flutter – BoxDecoration 小部件

BoxDecoration是一个内置在flutterAPI插件。在最基本的层面上，它描述了一个盒子应该如何在屏幕上绘制。盒子的形状不仅可以是矩形或正方形，也可以是圆形。它有很多属性，我们可以在里面添加图像，向边框添加半径(如果形状是矩形)，向框投射阴影等。下面我们将看到它的所有属性和示例实现BoxDecoration 小部件。

BoxDecoration 类的构造函数：

const BoxDecoration(
{Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape: BoxShape.rectangle}
)

BoxDecoration 小部件的属性：

backgroundBlendMode：此属性将BlendMode枚举作为此参数的对象。它将混合效果应用于背景颜色或渐变。
border： border参数以BoxBorder类为对象，在框周围绘制边框。
borderRadius：此属性将 BorderRadiusGeometry 类作为对象，如果框形状是矩形，则该对象会在边框角部周围添加曲线。
boxShadow：此属性包含一个 BoxShadow 小部件列表作为对象。它在盒子上投下阴影。
color：此属性将Color类作为对象，为BoxDecoration小部件提供背景颜色。
渐变：此属性以Gradient类为对象，在框内应用渐变填充。
image：此属性在背景上添加一个图像，以DecorationImage类为对象。
padding：此属性将 EdgeInsetsGeometry 类作为对象，在框内的内容周围添加空白空间。
shape：该属性以BoxShape为对象来决定盒子的形状。

例子：

Dart

import 'package:flutter/material.dart';
 
//imported material design package
void main() {
  runApp(
    //Widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            //BoxDecoration Widget
            decoration: BoxDecoration(
              image: const DecorationImage(
                image: NetworkImage(
                    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'),
                fit: BoxFit.cover,
              ), //DecorationImage
              border: Border.all(
                color: Colors.green,
                width: 8,
              ), //Border.all
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ), //Offset
                  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
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

输出：

说明：这个应用程序中的父小部件是Center ，它保存着应用程序主体的整个小部件树。 Center小部件将Container小部件作为子部件。 BoxDecoration小部件由Container的装饰属性获取。框内绘制的第一个元素是借助image属性的NetworkImage 。然后我们有边框属性，它在框周围分配了一个 4 像素厚的绿色边框。并且要在边框的角周围添加曲线，我们使用boderRadius属性在每个角上添加 15 px 半径的曲线。最后，我们有boxShadow属性，它包含两个BoxShadow类的列表，用于在框内(图像下方)分配白色背景，在框外分配深黑色阴影。

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