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

Flutter 学习笔记 （一）安装及运行
Flutter 学习笔记 （二）Container组件、Text组件、图片组件
Flutter 学习笔记 （三）列表
Flutter 学习笔记 （四）Padding、Row、Column、Expanded组件
Flutter 学习笔记 （五）Stack & Align、Strack & Positioned 布局组件
Flutter 学习笔记 （六）Card、AspectRatio、CircleAvatar 组件
Flutter 学习笔记 （七）RaisedBotton、Wrap组件
Flutter 学习笔记 （八）StatefulWidget组件
Flutter 学习笔记（ 九）BottomNavigationBar 组件 底部导航
Flutter 学习笔记 （十）AppBar 定义 Tab 切换
Flutter 学习笔记 （十一） Drawer 侧边栏
Flutter 学习笔记 （十二）floatingActionButton 类似闲鱼按钮
Flutter 学习笔记 （十三）TextField、Checkbox、Radio 组件
Flutter 学习笔记 （十四）时间组件
Flutter 学习笔记 （十五）flutter_swiper 轮播组件
Flutter 学习笔记 （十六）Dialog 组件
Flutter 学习笔记 （十七）网络数据请求
Flutter 学习笔记 （十八）路由跳转

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，则与边框不会产生影响，如右图所示