flutter写一个todoList邢毅彪12 Minutes2018年9月24日

前言

flutter是一个谷歌推出的高性能，跨平台解决方案。目前来看， 其有且只有一个缺点，就是生态还是刚起步。但是随着阿里，腾讯等国内巨头的入局，相信其前景还是比较乐观的。

准备工作

首先请参照flutter官方的文档，安装本地sdk及开发环境， 这里推荐使用IntelliJ IDEA作为ide来开发。

show me the code

1. 新建一个项目
   在命令长输入

flutter create first_flutter

2. 找到main.dart文件并修改

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
//    final wordPair = new WordPair.random();

    return new MaterialApp(
      title: 'hello, first flutter',
      home: new RandomWord(),
    );
  }
}

class RandomWordState extends State<RandomWord> {
  final List<String> _suggestions = <String>[];
  final TextStyle _biggerFont = const TextStyle(fontSize: 18.0);
  String _inputVal = '';
  final TextEditingController _inputCtrl = new TextEditingController();

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (BuildContext _context, int i) {
        if (i.isOdd) {
          return new Divider();
        }

        final int index = i ~/ 2;
        if (index < _suggestions.length) {
          return _buildRow(_suggestions[index], index);
        }
      },
    );
  }

  Widget _buildRow(String pair, int i) {
    return new ListTile(
      title: new Text(
        pair,
        style: _biggerFont,
      ),
      onTap: () => _removeSuggesstion(i),
    );
  }

  // 监听输入框改变
  _textChange(String val) {
    _inputVal = val;
  }

  // 增加一条消息
  _addList() {
    setState(() {
      _suggestions.add(_inputVal);
    });

    _inputCtrl.clear();

  }

  // 删除一条消息
  _removeSuggesstion(int i) {
    setState(() {
      _suggestions.removeAt(i);
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new TextField(
          controller: _inputCtrl,
          onChanged: _textChange,
        ),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.add), onPressed: _addList)
        ],
      ),
      body: _buildSuggestions(),
    );
  }

}

class RandomWord extends StatefulWidget {
  @override
  RandomWordState createState() {
    return new RandomWordState();
  }
}

3. 其中我们使用flutter的StatefulWidget来实现一个todoList，通过listView来实现一个列表视图，核心思想就是使用setState方法来改变state以使得改变视图，这点和react是一样的。