Flutter 开发日记(一)

Android 原生的开发任务,暂时告一段落,然后扒开了安装了好久的Flutter,准备开始正儿八经的学习一下,然后找了一个小的Demo,试着理解与编写这门语言;

下面就是Demo的效果图,开发工具是用的android Studio,
Demo的右上角的是跳转按钮 使用到的依赖在我们的 pubspec.yaml 文件中

dependencies:
  flutter:
    sdk: flutter
    
  cupertino_icons: ^0.1.2
  english_words: ^3.1.0#使用的依赖

开始找了半天,因为一直做得是android开发,不由自主的就去找android的字眼了;还有一个Ios,这里都不是我们页面所在的位置,直接点击上图的定位按钮,定位到我们的main.dart页面
这个是我的主页面代码也相对的非常简单
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200601180615264.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwMzE5Mg==,size_16,color_FFFFFF,t_70因为把我们的方法体抽出去了,所以看起来很简练,
runApp这里从名字就可以看出来使我们的程序主入口了
title 是我们的标题
那个theme这是改变我们的title的颜色的方法
具体的代码就是图上画红框的地方了,也就是我们的body体

首先我们来看看我们的RandomWords方法里面都有什么

class RandomWords extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new RandomWordsState();
  }
}



class RandomWordsState extends State<RandomWords> {
  //变量前面  加下划线  _  代表私有化  类似java 中的private
  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(
        centerTitle: true, //这个属性用来让Title居中显示
        title: new Text("呦呵,有点意思"), //这里用来设置我们的title
        actions: <Widget>[
          //添加在顶部右侧的导航栏
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)
        ],
      ),
      body: _buildSuggestions(), //这里是我们title下方的展示内容
    );
  }


//这个方法是添加一个ListView控件
  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(0.0),
        // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
        // 在偶数行，该函数会为单词对添加一个ListTile row.
        // 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
        itemBuilder: (context, i) {
          if (i.isOdd) return new Divider(); //在一个item之前添加一个一像素的线
          // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
          // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
          final index = i ~/ 2;
          print("zzzzzzzzzzzzz   ${index}"); //这里用来打印log 日志,应该在info一级
          if (index >= _suggestions.length) {
            //生成
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }
  
//这个方法用来给listView中的每一个item添加数据
  Widget _buildRow(WordPair suggestion) {
    final alreadySaved = _saved.contains(suggestion);
    return new ListTile(
      title: new Text(
        //这里用来给每一个lIstView的item添加一个头部内容
        suggestion.asPascalCase, //此处进行数据的添加 Demo中使用的是一个添加第三方插件用来进行数据的添加
        style: _biggerFont, //设置文字大小
      ),
      trailing: new Icon(
        //添加红心
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        //这里的图标是Flutter本身自带的
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
//        在Flutter的响应式风格的框架中，调用setState() 会为State对象触发build()方法，从而导致对UI的更新
        setState(() {
          if (alreadySaved) {
            _saved.remove(suggestion); //删除
          } else {
            _saved.add(suggestion); //添加
          }
        });
      },
    );
  }
  }

这里面得代码只是创建了一个类,并将主题方法抽出到我们的RandomWordsState()里面,这里的new RandomWordsState() 我个人理解为应该算是把那一整段 代码拿了过来,然后在里面设置我们的title,body,等等这些内容,这时候运行程序我们已经可以看到一个无限的listView了,接下来我们就是需要向我们的列表添加交互了 这里我在写的时候还去找了一张 桃心的图片,结果发现不需要,因为系统的素材库自带有相当多的素材,基本上我们写demo 是足够使用了;
这里以及基本够我们进行代码的交互了,点击选择的item,小红心就变红了,然后你会注意到我们的页面右上角有一个导航键,点击是没有反应的,
这里的我用来做页面交互了,在我们的_pushSaved 方法中添加方法,

//  RandomWordsState类添加一个 _pushSaved() 方法.
  void _pushSaved() {
    Navigator.of(context).push(new MaterialPageRoute(
      // ignore: missing_return
      builder: (context) {
        final tiles = _saved.map((suggestion) {
          return new ListTile(
            title: new Text(
              suggestion.asPascalCase,
              style: _biggerFont,
            ),
          );
        });
        final divided = ListTile.divideTiles(
          tiles: tiles,
          context: context,
        ).toList();

        return new Scaffold(
          appBar: new AppBar(
            title: new Text("Saved Suggestions"),
          ),
          body: new ListView(children: divided),
        );
      },
    ));
  }

用来进行我们选中数据的传递,以及页面的跳转;不过写这个方法的时候因为括号太多,好几次都小括号套花括号,把我套蒙了,暂时还没有找到一个可以自动补全括号的插件;如果有的话可以给我留言;暂时第一个小小的demo就写到这里了;如果那里有不对,欢迎大家指正

留下demo的传送门
git传送门