zoukankan      html  css  js  c++  java
  • 我的第一个Flutter 项目(电商)

    前言

    趁着这次被裁员找工作的空闲时间,刚好在撸Flutter 当然不是简单的hello world的,自己撸了一个小电商项目,当然还没有完全出来,

    那应该也是对Flutter入门了,前提是要学会Dart哦! 

    (安装Flutter的博我以后再更新下)

    哈哈哈哈  我学废了

    先简单看下效果图 :(还是第一次学会用gif 工具 哈哈 ) 

    在 Flutter 里(Widget最为重要)

    万物皆widget

    我刚刚开始写Flutter的时候被这该死的嵌套有点懵逼 ,Container里有child, 在child里又有其他的什么row,

    哇 真的其实蛮无奈的

    • Weight 不再清晰了,是像怎么叫就怎么叫
    • Weight 责任更多了,很多 Weight 组件肩负很多任务,有些相同的任务又有好几个 Weight 可供选择
    • 属性设置不再统一了,有了层级之分

    widget在ui层面相当于原生的uiview,但是不仅仅局限于显示视图UIView,也有用于布局相关的。

    基础 Widgets
    Container、Button、Row和Column、Text、Scaffold、Icon、Image、Stack、TabBar+TabBarView、Widget-输入框TextField
    
    用于布局的 Widgets
    Align、Center、Expended、LayoutBuilder、Padding、Wrap
    
    可滚动 Widgets
    CustomScrollView、GridView、ListView、PageView、SingleChildScrollView
    
    装饰 Widgets
    BoxDecoration、Clip系列、Opacity、SafeArea、高斯模糊BackdropFilter

    Xcode 安装Flutter插件

    当然我用的是Xcode 写的 里面有代码修复功能和报错插件,

    所有布局的控件都写到 Widget build(BuildContext context) { ... } 方法中,但是 但是控件需要用到是内容并且可能改变的,则使用一个变量记下来

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    final String title; 就是声明了一个title的字符串。

    或者

    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
        ...
    }

    控件写法与使用

    AppBar(
            title: Text(widget.title),
          ),
    
      Text(
          '$_counter',
          style: Theme.of(context).textTheme.display1,
        ),

    改变文本内容 setState

    这是和原生最大的差别,需要改变文本的内容则需要使用setState中生效,告诉flutter这时候状态变化了,需要重新刷新。

    例子中单击+ 数字+1,可以看到界面上的数字立即更新了

     void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }

    值得注意的是,state频繁刷新也会带来性能问题

    我目前只是对Flutter  UI 基本组件,路由,点击事件对使用和理解编写,但是已经感觉到了无解的存在了,

    虽然该死的嵌套 让人望而却步,但是 熟悉的组件开发还是那么的给力,就爱上了 哈哈哈

     
    感觉这门语言很绝,不同其他语言,但是又有相似点,集react,TS,java,js 于一生的 变态语言 哈哈哈
    然后就是想把这个项目完善完再上传到GItHub 上。

    祝面试自己顺利 ,2020 加油 呀,更上一节

  • 相关阅读:
    class(类)和构造函数(原型对象)
    es6中export和export default的区别
    vue混入 (mixin)的使用
    ES6(Module模块化)
    vue-cli3构建和发布 实现分环境打包步骤(给不同的环境配置相对应的打包命令)
    Vue中使用Echarts 脱坑
    Nginx配置详解
    VUE面包屑组件
    更改 pip 默认下载源(pip 配置文件)
    常见免费API接口
  • 原文地址:https://www.cnblogs.com/yf-html/p/14032719.html
Copyright © 2011-2022 走看看