Android Flutter（四）组件（StatelessWi

Flutter是google使用Dart语言开发的跨平台移动UI框架。

- 优点：

1. dart是面向对象的语言，易学
2. 高性能，高保真
3. 双端支持
4. 毫秒级的热重载，修改后，您的应用界面会立即更新。

我学习下来的感受，如果有css基础的话，组件属性学起来会非常快。

进入正题，说一下Flutter中组件的两个大类。

Flutter中所有自定义组件都需要继承自StatefulWidget/StatelessWidget。这两者的区别：

• StatefulWidget是有状态组件，持有的状态会随着Widget的生命周期改变。直白点讲，就是如果需要修改页面的数据，就要用到StatefulWidget了，典型的组件就是EditField，这个组件相当于Android中的EditText，这个后面会总结。
• StatelessWidget就是无状态组件了，状态不可变的Widget

这篇先总结StatelessWidget常用组件。

1 . 图片组件

这里分两种:

• 网络图片 Image.network
• 本地图片 Image.asset

网络图片

  return Center(
        child: Container(
          child: Image.network(
            "http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg",
            alignment: Alignment.topLeft,
            //repeat:ImageRepeat.repeatX, fit:BoxFit.cover, ),
            width: 300.0,
            height: 400.0,
          ),
        ));

本地图片

本地图片比较复杂，首先在项目根目录下创建images文件夹，并在images下创建2.0x，3.0x，4.0x这么几个文件夹，其中2.0和3.0是必须创建的。把图扔进去。

image.png
在配置文件pubspec.yaml中注册图片。

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - images/kongtiao.png
    - images/2.0x/kongtiao.png
    - images/3.0x/kongtiao.png
    - images/4.0x/kongtiao.png

代码

return Center(
        child: Container(
      child: Image.asset("images/kongtiao.png", fit: BoxFit.cover),
      width: 300.0,
      height: 300.0,
      decoration: BoxDecoration(color: Colors.yellow),
    ));

• 圆角图片（ClipOval组件）

return Center(
  child: ClipOval(
    child: Image.asset(
    "images/kongtiao.png",
    width: 100.0,
    height: 100.0,
    fit: BoxFit.cover,
  ),
 ),
)

2 . 内边距（Padding）

return Container(
  child: Padding(
   padding: EdgeInsets.all(40.0),
   child: ListView(
          
   ),
  ),
);

3. 布局组件

• Row 水平布局
• Column 垂直布局
• Center 居中布局
• Wrap 流式布局
• Stack层叠组件
  类似RelativeLayout ，主属性alignment

//居中
alignment:Alignment(0,0);
//右下
alignment:Alignment(1,1);
//上中
alignment:Alignment(0,-1);
//下中
alignment:Alignment(0,1);

1. 单独控制：Align
   使用组件Align和Stack组合使用

return Stack(
  children:<widget>[
    Align(
      alignment:Alignment(1,1);
      child:...
   )，
  Align(
      alignment:Alignment(1,1);
      child:...
   )
  ]
)；

2. 绝对定位：Positioned

return Stack(
  children:<widget>[
    Positioned(
      left:10,
      child:...
   )，                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
  Positioned(
      bottom:0,
      child:...
   )
  ]
)；

4. 宽高比例容器（AspectRatio）

会根据你指定的宽度或者高度自动根据指定比例适应。如果不指定，默认充满屏幕宽度。

5. 卡片容器（Card）

主要属性：

• shape阴影效果
• child布局

6. 处理圆形头像（CircleAvatar)

7. 列表组件（ListView)