Flutter学习

     1:Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面,因此有必要学习下flutter,下面记录下最近学习知识点:
    1:flutter使用的语言是dart语言,运行的入口是lib目录下的main.dart中的main方法,main方法中的runApp中传入的对象就是程序中要执行的,具体对象需要继承对应的组件,这里有两种组件可以继承,如下:
   StatelessWidget:无状态的组件
   StatefulWidget:有状态的组件
   (1)继承第一种无状态组件,需要实现对应的build方法,如下:

   @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primaryColor: Colors.blue),
      home:
      Scaffold(
        appBar: AppBar(title: Text('Demo')),
        body: ImagePickerDemo()
      ),
    );

      说明下,该方法返回的对象是Widget,都是通过MaterialApp创建,以前的样式需要加new(new MaterialApp),现在已经去掉,由这里可以看到,其实dart其实也是一种面向对象语音(个人理解),学过java或者其他面向对象语言的朋友应该就
    比较容易理解这个创建了,另外这里需要了解dart语言里面各个组件的属性和用法,例如这里的title,theme,home,Scaffold属性,当然dart不止这些属性。
    
    (2)继承第二种有状态的组件,需要实现如下方法:

     @override
  State<StatefulWidget> createState() {
    return _AnimatedListSimpleState();
  }
}

class _AnimatedListSimpleState extends State<ItemControl> {
...
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('AnimatedList'),
            actions: <Widget>[
              IconButton(onPressed: _insert,
                icon: Icon(Icons.add_circle),
                tooltip: 'insert a new item',),
              IconButton(onPressed: _remove,
                icon: Icon(Icons.remove),
                tooltip: 'remove the selected item',)
            ],),
          body: Padding(padding: const EdgeInsets.all(16.0),
            child: AnimatedList(
              key: _listKey,
              initialItemCount: _list.length,
              itemBuilder: _buildItem,
            ),),
        )
    );
    ...

  布局的创建(android是在layout中直接创建xml的布局,而flutter是在代码中直接编辑创建):

  @override
Widget build(BuildContext context) {
  return new Scaffold(
    appBar: new AppBar( //创建appbar
      title: new Text("Sample App"), //设置app的标题
    ),
    body: new Center(   //创建主体内容
      child: new MaterialButton(  //在布局*设置子控件为material类型的按钮
        onPressed: () {},   //设置该按钮的点击事件
        child: new Text('Hello'), //设置该按钮的标题
        padding: new EdgeInsets.only(left: 10.0, right: 10.0), 设置该按钮左右的padding
      ),
    ),
  );
}

部分控件(Widget)如下:
Container:容器,可以设置子控件padding等属性
Column:竖直一排的容器
Row:横向一排的容器
ListView:类似android的ListView,也是竖直方向的列表Widget
GridView:类似android的GridView,也是横向方向的列表Widget
Stack:就是FrameLayout,帧布局,以左上角为起始点,按照子控件的先后顺序,直接覆盖上去,后来居上

添加第三方依赖:(在pubspec.yaml中添加,类似build.grade中dependencies),如下:

dependencies:
  flutter:
  sdk: flutter
  cupertino_icons: ^1.0.2    #基础框架
  english_words: ^3.1.0      #英文框架
  image_picker: ^0.6.7+21   #图片选择框架
  dio: ^2.1.7    #网络框架
  path_provider: ^1.6.11  provider框架

其中编译的时候如果这里有报错就可能是框架首字母没有对齐flutter问题,本人遇到过首字母没有对齐报错问题

引入外部图片:(也是在pubspec.yaml中添加),如下:
assets:
     - images/mv.jpg


     以上初步记录了本人学习到flutter知识,其实还有很多的知识点没有列出,比如交互,动画,手势事件,异步,网络以及数据的加载等,这里只是简单记录下,希望后面有时间再补充完整,上面有什么记录存在问题的,欢迎各位大神指出,本人将非常乐意修改。

上一篇:Dart语法基础系列三《常量变量》


下一篇:jsp\struts1.2\struts2 中文件上传(转)