我的第一个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 加油 呀，更上一节