Flutter-Container

1. Container组件

1.1 Container介绍

Container在开发中被使用的频率是非常高的，特别是我们经常会将其作为容器组件。
下面我们来看一下Container有哪些属性：

Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
})

大多数属性在介绍其它容器时都已经介绍过了，不再赘述，但有两点需要说明：

• 容器的大小可以通过width、height属性来指定，也可以通过constraints来指定，如果同时存在时，width、height优先。实际上Container内部会根据width、height来生成一个constraints；
• color和decoration是互斥的，实际上，当指定color时，Container内会自动创建一个decoration；

1.2. Container演练

简单进行一个演示：

image.png

1.3. BoxDecoration

Container有一个非常重要的属性 decoration：

• 他对应的类型是Decoration类型，但是它是一个抽象类。
• 在开发中，我们经常使用它的实现类BoxDecoration来进行实例化

BoxDecoration常见属性：

const BoxDecoration({
    this.color, // 颜色，会和Container中的color属性冲突
    this.image, // 背景图片
    this.border, // 边框，对应类型是Border类型，里面每一个边框使用BorderSide
    this.borderRadius, // 圆角效果
    this.boxShadow, // 阴影效果
    this.gradient, // 渐变效果
    this.backgroundBlendMode, // 背景混合
    this.shape = BoxShape.rectangle, // 形变
  })

部分效果演示：

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("HelloWorld"),
        ),
        body: MyHomeBody(),
      ),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          buildContainerRadius(),
          SizedBox(height: 30,),
          buildContainer(),
        ],
      ),
    );
  }

  Container buildContainerRadius() {
    return Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        image: DecorationImage(
          image: NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        ),
      ),
    );
  }

  Container buildContainer() {
    return Container(
//        color: Color.fromRGBO(3, 3, 255, 0.5),
      width: 150,
      height: 150,
      child: Icon(Icons.pets,size: 32,color: Colors.white,),
      decoration: BoxDecoration(
        color: Colors.amber,
        border: Border.all(
          color: Colors.redAccent,
          width: 3,
          style: BorderStyle.solid
        ),
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            offset: Offset(5,5),
            color: Colors.purple,
            blurRadius: 5
          ),
        ],
        gradient: LinearGradient(
          colors: [
            Colors.green,
            Colors.red
          ],
        ),
      ),
    );
  }
}

image.png

学习内容来自Flutter从入门到实战