当前位置:   article > 正文

Flutter学习

flutter学习

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

   (1)继承第一种无状态组件,需要实现对应的build方法,如下:

  1. @override
  2. Widget build(BuildContext context) {
  3. return MaterialApp(
  4. title: 'Flutter Demo',
  5. theme: ThemeData(primaryColor: Colors.blue),
  6. home:
  7. Scaffold(
  8. appBar: AppBar(title: Text('Demo')),
  9. body: ImagePickerDemo()
  10. ),
  11. );

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

  1.      @override
  2.   State<StatefulWidget> createState() {
  3.     return _AnimatedListSimpleState();
  4.   }
  5. }
  6. class _AnimatedListSimpleState extends State<ItemControl> {
  7. ...
  8.   @override
  9.   Widget build(BuildContext context) {
  10.     return MaterialApp(
  11.         home: Scaffold(
  12.           appBar: AppBar(title: Text('AnimatedList'),
  13.             actions: <Widget>[
  14.               IconButton(onPressed: _insert,
  15.                 icon: Icon(Icons.add_circle),
  16.                 tooltip: 'insert a new item',),
  17.               IconButton(onPressed: _remove,
  18.                 icon: Icon(Icons.remove),
  19.                 tooltip: 'remove the selected item',)
  20.             ],),
  21.           body: Padding(padding: const EdgeInsets.all(16.0),
  22.             child: AnimatedList(
  23.               key: _listKey,
  24.               initialItemCount: _list.length,
  25.               itemBuilder: _buildItem,
  26.             ),),
  27.         )
  28.     );
  29.     ...

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

  1.  @override
  2. Widget build(BuildContext context) {
  3.   return new Scaffold(
  4.     appBar: new AppBar( //创建appbar
  5.       title: new Text("Sample App"), //设置app的标题
  6.     ),
  7.     body: new Center(   //创建主体内容
  8.       child: new MaterialButton(  //在布局中央设置子控件为material类型的按钮
  9.         onPressed: () {},   //设置该按钮的点击事件
  10.         child: new Text('Hello'), //设置该按钮的标题
  11.         padding: new EdgeInsets.only(left: 10.0, right: 10.0), 设置该按钮左右的padding
  12.       ),
  13.     ),
  14.   );
  15. }

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小舞很执着/article/detail/973726
推荐阅读
相关标签
  

闽ICP备14008679号