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
          ), //Cotainer
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

输出：

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

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

单击此处前往由我们的专家精心策划的指南，以使您立即做好行业准备！