📜  Flutter – BoxDecoration小部件

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

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的基础知识吗?
单击此处,前往由我们的专家精心策划的指南,以使您立即做好行业准备!