『Flutter』初始化~

有段时间没写博客了，这段时间一直在看flutter，刚开始看感觉有点怪怪的。于是先去撸了一遍官方文档，
Flutter官方文档,感觉有些收获啊！
前期还是环境的搭建，由于之前在公司写vue一直用的vscode，这次决定换成android studio,有完整的ide体验哦！
环境搭建有些小坑啊，因为刚换了电脑，所以这个flutter环境搞了两边~，蓝瘦。
flutter是用dart语言写的，我觉得除了ui构建有的怪以外，其他的跟js很相似。

进入正题吧

先看下面这段代码

import 'package:flutter/material.dart';
//import 'package:flutter_app/strings.dart';
import 'package:english_words/english_words.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'start up',
      theme: new ThemeData(
        primaryColor: Colors.white
      ),
      home: new Randomwords()
    );
  }
}
class Randomwords extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new RandomwordsState();
  }
}
class RandomwordsState extends State<Randomwords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);
  final _saved = new Set<WordPair>();
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('start up appbar'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
          new IconButton(icon: new Icon(Icons.add), onPressed: _pushSaved),
          new IconButton(icon: new Icon(Icons.create), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggeststions(),
    );
  }

如果要导入dart文件直接import 就够了，跟html差不多

void main() => runApp(new MyApp()); 启动函数

StatelessWidget 是不需要可变状态的widget
StatefulWidget 是需要可变状态的widget。
import 'package:flutter/material.dart’ 这个地方导入的是flutter自带的组件库

Scaffold 可以理解为布局脚手架

class Scaffold extends StatefulWidget {
  /// Creates a visual scaffold for material design widgets.
  const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding = true,
    this.primary = true,
  }) : assert(primary != null), super(key: key);

对于flutter的布局，我觉得跟html有很多相似之处，就是堆积木的感觉，不管是什么界面，拆分开就好，

image.png

就拿上面这个界面来说，很明显可以拆分成，一个appbar，和一个listview，
而appbar我们在scaffold中就可以构建出来，listView就需要单独构建，可以放到body的位置，记住，所有的控件都是widget。
listView构造方法, listView有很多种构造方法，builder只是其中一种，

  Widget _buildSuggeststions() {
    return new ListView.builder(
        padding: EdgeInsets.all(10.0),  //padding 
        scrollDirection: Axis.vertical,//滑动方向
        itemBuilder: (context, i) { //构建cell
          if (i.isOdd) return new Divider();
          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);  
        });
  }

下面是构建cell的方法，在onTap点击事件中，在setState中更新全局变量 _saved的数量，然后驱动状态UI更新。具体的原理就要设计flutter的生命周期了。

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

第一篇先到这吧，这段时间应该会一直学习flutter了
https://github.com/Butteryflyyer/FlutterStudyDemo这是我学习flutter的代码地址，平时写的demo都会放到这里面。