Flutter 基础Widgets之容器Container详解

126.jpg

container概述

Container是一个非常常用的容器组件,它包含了常规的Padding、BoxDecoration、DecorationImage、Border、BoxShaow、transform等等一系列Widgets。

构造函数

Container({
    Key key,
    this.alignment,
    this.padding,
    Color color,
    Decoration decoration,
    this.foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    this.margin,
    this.transform,
    this.child,
  })
  • alignment child的对齐方式 Alignment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。因此,2.0单位水平(或垂直)等于矩形的宽度(或高度)。
  • padding 在容器内填充,填充物为child 和alignment对齐会有冲突,但是最终还是padding主导 可以上下左右都可以填充 symmetric 垂直或水平的填充, only 填充一个方向
  • color 容器背景颜色 此处是 decoration: new BoxDecoration(color: color) 简写,即不能同时decoration和color使用,冲突时当然是将color放在Boxdecoration中设置执行

  • decoration 由此类提供所有装饰的抽象接口定义,可以使用boxDEcoration,其提供了多种装饰能力

boxDecoration 构造函数

const BoxDecoration({
    this.color,
    this.image,
    this.border,
    this.borderRadius,
    this.boxShadow,
    this.gradient,
    this.backgroundBlendMode,
    this.shape = BoxShape.rectangle,
  })
  • color 背景颜色

  • image 背景图片 使用DecorationImage定义:
DecorationImage构造函数
 const DecorationImage({
    @required this.image,
    this.colorFilter,
    this.fit,
    this.alignment = Alignment.center,
    this.centerSlice,
    this.repeat = ImageRepeat.noRepeat,
    this.matchTextDirection = false,
  })

  • image 即图片源,可使用的子类: AssetBundleImageProvider FileImage MemoryImage NetworkImage 此处选择网络图片
NetworkImage构造函数
const NetworkImage(this.url, { this.scale = 1.0 , this.headers })
  • url 即网络图片地址
  • scale 图像比例,数值越大图片比例越小
  • headrs 请求图像的头信息

  • colorFilter 彩色滤镜
  • fit 怎么将图像填充到容器中 比如contain 尽可能大,但将图像完全包含在目标框中
  • alignment 在范围对图像进行对齐操作
  • repeat 图片重复的方向,repeat 即x 轴和y 轴都重复 然后 repeatX 即在X方向重复
  • matchTextDirection 是否在 TextDirection 方向绘图
  • border Border可以独立绘制上下左右独立边框的颜色,宽度等 当然也可以使用封装好的比如 all,直接绘制边框
  • borderRadius 圆角的绘制

  • boxShadow 盒子的阴影列表,形状随盒子而变 BoxShadow定义

BoxShadow构造函数

const BoxShadow({
    Color color = const Color(0xFF000000),
    Offset offset = Offset.zero,
    double blurRadius = 0.0,
    this.spreadRadius = 0.0
  • color 阴影颜色
  • offset 阴影的相对盒子的偏移量
  • blueRadius 阴影的模糊程度
  • spreadRadius 类似阴影的膨胀程度,可以理解为阴影的大小

  • gradient 渐变类,一般使用 LinearGradient

LinearGradient构造函数

const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List colors,
    List stops,
    this.tileMode = TileMode.clamp,
  })
  • begin 渐变量开始的位置
  • end 渐变量结束的位置
  • colors 渐变的基色
  • tileMode 定义渐变梯度的边缘 对比image的repeat

  • shape 形状
  • foregroundDecoration 前景装饰
  • width 宽度
  • height 高度

  • constraints 限制容器大小 一般使用BoxConstraints

BoxConstraints构造函数

const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity
  });
  • minWidth 最小宽度
  • maxWidth 最大宽度
  • minHeight 最小高度
  • maxHeight 最大高度

  • margin 容器外填充
  • transform 对容器实现矩阵变换操作
  • child 子组件

实例构造及注释详解

下面实现了一个倾斜的全面屏手机任务运行界面:

// container 详解学习

import 'package:flutter/material.dart';
class ContainerLearn extends StatelessWidget {
  final _textStyle = TextStyle(
      color: Colors.white,
      fontSize: 20,
      letterSpacing: 4,
      wordSpacing: 4,
      shadows: [
        Shadow(color: Colors.black87, offset: Offset(5, 5), blurRadius: 8)
      ]);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Container'),
      ),
      // 一个方便的小部件,它组合了常见的绘画、定位和大小小部件。
      body: new Container(
          // 控制容器中child的位置,可以输入坐标参数,也可以设置预先设定的坐标位置
          // Aliment(0.0,0.0)表示矩形的中心。从-1.0到+1.0的距离是矩形的一边到另一边的距离。因此,2.0单位水平(或垂直)等于矩形的宽度(或高度)。
          alignment: Alignment(0, 1),
          // 在容器内填充,填充物为child  和alignment对齐会有冲突,但是最终还是padding主导 可以上下左右都可以填充  symmetric 垂直或水平的填充, only 填充一个方向
          padding: EdgeInsets.symmetric(vertical: 60, horizontal: 75),
          // 容器背景颜色 此处是 decoration: new BoxDecoration(color: color) 简写,即不能同时decoration和color使用,冲突时当然是将color放在Boxdecoration中设置执行
          // color: Colors.blueAccent,
          // 由此类提供所有装饰的抽象接口定义,可以使用boxDEcoration,其提供了多种装饰能力
          decoration: BoxDecoration(
              // 背景颜色
              color: Colors.blueAccent,
              // 背景图像
              image: DecorationImage(
                  // 可使用的子类: AssetBundleImageProvider FileImage MemoryImage NetworkImage
                  image: NetworkImage(
                      'https://flutter.cn/assets/get-started/ios/hello-world-ed7cf47213953bfca5eaa74fba63a78538d782f2c63a7c575068f3c2f7298bde.png',
                      // 图像比例,数值越大图片比例越小
                      scale: 3.0,
                      // 请求图像的头信息
                      headers: {
                        'User-Agent':
                            'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'
                      }),
                  // 彩色滤镜,此处为覆盖一个black12滤镜
                  colorFilter:
                      ColorFilter.mode(Colors.black12, BlendMode.srcOver),
                  // 怎么将图像填充到容器中 比如contain 尽可能大,但将图像完全包含在目标框中
                  fit: BoxFit.none,
                  // 在范围对图像进行对齐操作
                  alignment: Alignment.center,
                  // 对于可拉伸图片的切片操作? 不是很懂
                  // centerSlice: Rect.fromLTRB(3,3,3,3)
                  // 图重复的方向,repeat 即x 轴和y 轴都重复 然后 repeatX 即在X方向重复
                  repeat: ImageRepeat.repeatX,
                  // 是否在 TextDirection 方向绘图
                  matchTextDirection: false),
              // 边框 BoxDecoration 抽象类   使用子类有 Border BorderDirectional
              // Border可以独立绘制上下左右独立边框的颜色,宽度等 当然也可以使用封装好的比如 all,直接绘制边框
              border: Border.all(
                  color: Colors.black87,
                  width: 2.0,
                  // 边框样式
                  style: BorderStyle.solid),
              // 圆角
              borderRadius: BorderRadius.circular(30),
              // 盒子的阴影列表,形状随盒子而变
              boxShadow: [
                BoxShadow(
                    // color 阴影颜色   offset 阴影的相对盒子的偏移量,   blueRadius 阴影的模糊程度   spreadRadius 类似阴影的膨胀程度,可以理解为阴影的大小
                    color: Colors.black45,
                    offset: Offset(8, 8),
                    blurRadius: 7,
                    spreadRadius: 7)
              ],
              // Gradient 抽象类定义 渐变类 LinearGradient
              gradient: LinearGradient(
                  // 渐变偏移量开始的位置
                  begin: Alignment(-1, 0),
                  // 渐变偏移结束的位置
                  end: Alignment(1, 0),
                  // 绘制的基色
                  colors: [Colors.purple, Colors.blue[900]],
                  // 创建一个线性梯度 0~1.0 这个不懂
                  // stops: [0.6],
                  // 定义渐变梯度的边缘 对比image的repeat
                  tileMode: TileMode.clamp),
              // 形状
              shape: BoxShape.rectangle),
          // 前景装饰
          foregroundDecoration: BoxDecoration(),
          // 长度
          width: 224,
          // 高度
          height: 486,
          // 限制容器大小
          constraints: BoxConstraints(
            // 设置宽度尽可能大
            // minWidth: double.infinity,
            // 最小高度20
            minHeight: 20,
            // 最大宽度 300
            maxWidth: 300,
          ),
          // 容器外填充
          margin: EdgeInsets.symmetric(vertical: 20, horizontal: 0),
          // 对容器实现矩阵变换操作,Matrix是一个4D矩阵
          transform: Matrix4.skewY(0.3)..rotateZ(-3.14 / 12.0),
          child: Icon(
            Icons.close,
            color: Colors.white70,
            semanticLabel: 'Close',
          )),
    );
  }
}

构造效果

2BECF62EDF9CEA2CCA2965438DCD0A0F.png

你可能感兴趣的:(Flutter 基础Widgets之容器Container详解)