工作生活

Flutter -- 创建你的第一个应用

2019-07-04  本文已影响0人  一个不太努力的代码搬运工

上一篇我们已经配置完所有的Flutter环境，那接下来开始创建第一个Flutter应用。
1.打开IDEA选择Flutter

Snip20190702_2.png
然后创建项目填写项目名称，注意：项目名称中不能包含大写字母！！！ Snip20190702_11.png
2.此时我们可以在项目目录中找到Android和iOS的项目
Snip20190702_13.png
打开iOS应用，创建一个唯一的bundleID，能在手机中运行即可
image.png
3.创建文件，复制代码 
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
}

dependencies:
  flutter:
  sdk: flutter
  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

但是在pubspec,yaml中，发现只是缺少english_words: ^3.1.0,添加这行代码

image.png

然后单击右上角的 Packages get这样就会将依赖包安装到项目中

pubspec.yaml
控制台中会显示以下内容
image.png 
import 'package:flutter/widgets.dart';
import 'package:fluttertest/RandomWordsState.dart';
//动态组件类,用于显示listview
class RandomWords extends StatefulWidget {
  //返回状态,告诉widget不同情况下如何展示
  @override
  State<StatefulWidget> createState() { 
    return new RandomWordsStat();
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:fluttertest/RandomWords.dart';
import 'package:english_words/english_words.dart';
//State 是当 Widget 被渲染或者在其生命周期中状态改变时，能同步读到相关信息的对象。当实例StatefulWidget 时
// 必须保证能正确使用 State.setState 来告知该 Widget的状态发生了变化。

class RandomWordsStat extends State<RandomWords>{
  //Dart中加上 _表示私有化
  final _suggestions = <WordPair>[];   //分析 1
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);   //分析 2
  @override
  Widget build(BuildContext context) {
    return new Scaffold (
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[ //右上角按钮点击事件，跳转到下一个页面，所以要实现`_pushSaved`这个方法
          new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }
  Widget _buildSuggestions() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        // 对于每个建议的单词对都会调用一次itemBuilder，然后将单词对添加到ListTile行中
        // 在偶数行，该函数会为单词对添加一个ListTile row.
        // 在奇数行，该函数会添加一个分割线widget，来分隔相邻的词对。
        // 注意，在小屏幕上，分割线看起来可能比较吃力。
        itemBuilder: (context, i) {
          // 在每一列之前，添加一个1像素高的分隔线widget
          //当时奇数时返回true
          if (i.isOdd) return new Divider();

          // 语法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i为：1, 2, 3, 4, 5
          // 时，结果为0, 1, 1, 2, 2， 这可以计算出ListView中减去分隔线后的实际单词对数量
          final index = i ~/ 2;
          // 如果是建议列表中最后一个单词对
          if (index >= _suggestions.length) {
            // ...接着再生成10个单词对，然后添加到建议列表
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        }
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    //listView中的行,相当于cell
    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);
          }
        });
      },
    );
  }
 //右上角跳转
  void _pushSaved() {

    Navigator.of(context).push(  // 分析 1//通过Navigator.of(context).push来跳转页面
      new MaterialPageRoute(  // 分析 2 跳转的话我们需要一个路由
        builder: (context) {
          final tiles = _saved.map(  //数据，从set中获取的数据
                (pair) {
              return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );
          final divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return new Scaffold(  // 分析 3 将要跳转的页面,body的内容是一个listView.展示的数据
            appBar: new AppBar(
              title: new Text('Saved Suggestions'),
            ),
            body: new ListView(children: divided),
          );
        },
      ),
    );
  }
}

在此处可以看到，onTap时调用了state.setState，这时会告诉框架重绘RandomWords这个widget

import 'package:flutter/material.dart';
import 'package:fluttertest/RandomWords.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

此时我们就可以在手机上运行项目了。


Jul-03-2019 18-14-42.gif

虽说这个小demo已经出来了，但还是有一些不太了解的地方，下面列出了我觉得需要注意的地方。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      home: new RandomWords(),
    );
  }
}

asPascalCase          first和seconde首字母大写
asString              返回原始的string，不做修改
asLowerCase           first 和second的首字母都是大写
asUpperCase           所有字母都大写
asCamelCase        first首字母小写，second首字母大写

边学习边记录。

上一篇 下一篇

猜你喜欢

热点阅读