Flutter 学习笔记 （二）Container组件、Text组件、图片组件

Container

包含很多设置属性，长宽、背景颜色、显示位置、装饰、与内部内容的间隔，旋转等等。

child: Container(
  width: 100.0,
  height: 100.0,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.blue,
      width: 5.0,
    )
),

Text

包含最大行数、显示位置、风格等

child: Text(
  'this is a bar',
  maxLines: 2,
  style: TextStyle(
    fontSize: 30.0,
    color: Colors.yellow,
  ),
),

图片

网络图片

可以conatainer中的Decoration中设置，作为背景图片

decoration: BoxDecoration(
  image: DecorationImage(
    image: NetworkImage('https://avatars0.githubusercontent.com/u/12151492'),
    fit: BoxFit.cover,
  ),
),

也可以在container中添加child图片组件

child: Image.network(
  'https://avatars0.githubusercontent.com/u/12151492',
  height: 100,
  width: 100,
  fit: BoxFit.cover,
),

本地图片

• 首先在根目录新建images文件夹，在images目录下新建2.0x和3.0x文件夹，将图片分配复制到上述三个文件夹中
  

• 在pubspec.yaml文件中进行修改，将目录添加其中，一个图片要添加3个
  

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage('images/a.jpg'),
    fit: BoxFit.cover,
  ),
),

或者

child: Image.asset(
  'images/a.jpg',
  height: 100,
  width: 200,
  fit: BoxFit.cover,
),

圆形图片

使用ClioOval类，其承载在一个Container中

child: ClipOval(
  child: Image.network(
    'https://tse1-mm.cn.bing.net/th/id/OIP.vykkHMFa-oiek6zESN7JRAAAAA',
    height: 400, 
    width: 400, 
  ),
),

另一种是用Decoration组件，承载在container中，通过改变其四个角的弧形半径来实现
例如width和height都是200，则4个角大小应为其一半，即100

decoration: BoxDecoration(
 color: Colors.blue,
  borderRadius: BorderRadius.circular(100),
  border: Border.all(width: 5,color: Colors.blue),
  image: DecorationImage(
    image: NetworkImage('https://tse1-mm.cn.bing.net/th/id/OIP.vykkHMFa-oiek6zESN7JRAAAAA'),
    fit: BoxFit.cover,
  ),
),

两者的区别
当在Decoration中设置边框宽度为15时，由于是向内画边框，当在Decoration中加入图片，图片作为Container的修饰，铺满了Container，所以边框会覆盖图片，如左图所示
使用ClipOval，则与边框不会产生影响，如右图所示