TodoList深入Flutter狀態管理(上篇)

張風捷特烈發表於2019-07-26
Flutter

上篇: 又不是不能用-篇 本文原始碼Github

0.1:對我而言，一個產品有四層境界
1.造都造不出來
2.它又不是不能用    <----
3.用的時候大家都不說話
4.如絲般順滑，易擴充,易修改，易複用
複製程式碼

TodoList深入Flutter狀態管理(上篇)

0.2：要說的話

注意:本篇是對狀態最基本的使用。雖然比較糙，但是並不代表不重要
後面兩篇是基於此篇的優化，所以這篇一定要看懂,才能跟上我的思維。
效果如下，單從介面上來看，我還是比較滿意的。

TodoList深入Flutter狀態管理(上篇)

0.3: 簡介一下

本專案主要包括以下幾點:

1. 輸入一個待辦事項，下面的ListView動態更新  
2. 條目的核取方塊選中，條目的文字自動新增下劃線
3. 條目的核取方塊非選中，條目的文字自動取消下劃線
4. 三個按鈕會根據是否完成而過濾資料，顯示相應條目
複製程式碼

1.靜態介面的實現

萬里長征第一步,當然是先把靜態介面搞出了。

import 'package:flutter/material.dart';

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

class _TodoListState extends State<TodoList> {
  @override
  Widget build(BuildContext context) {
        return Container();
  }
}
複製程式碼
1.1.輸入框的元件

通過一個TextField和RaisedButton進行拼合,樣式什麼的自己看，就不廢話了。
我感覺這樣挺好看的，不枉我精心除錯一番。喜歡的話，可以自己抽個元件。

TodoList深入Flutter狀態管理(上篇)

var textField = TextField(
  controller: new TextEditingController(text: this.text),
  keyboardType: TextInputType.text,
  textAlign: TextAlign.start,
  maxLines: 1,
  cursorColor: Colors.black,
  cursorWidth: 3,
  style: TextStyle(
      fontSize: 16, color: Colors.lightBlue, backgroundColor: Colors.white),
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.white,
    hintText: '新增一個待辦項',
    hintStyle: TextStyle(color: Colors.black26, fontSize: 14),
    contentPadding: EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
    ),
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
    ),
  ),
  onChanged: (str) {
    //輸入時的回撥
  },
);
var btn = RaisedButton(
  child: Icon(Icons.add),
  padding: EdgeInsets.zero,
  onPressed: () {
    //按鈕點選回撥
  },
);

var inputBtn = Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Container(
      child: textField,
      width: 200,
    ),
    ClipRRect(
      borderRadius: BorderRadius.only(
          topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
      child: Container(
        child: btn,
        width: 36,
        height: 36,
      ),
    ),
  ],
);
複製程式碼
1.2.三個按鈕

三個按鈕，比較簡單

TodoList深入Flutter狀態管理(上篇)

var op = Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    RaisedButton(
      color: Colors.blue,
      onPressed: () {
      },
      child: Text("全部"),
    ),
    RaisedButton(
      onPressed: () {
      },
      child: Text("已完成"),
    ),
    RaisedButton(
      onPressed: () {
      },
      child: Text("未完成"),
    ),
  ],
);
複製程式碼
1.3.待準備的資料
  • 用一個Map盛放文字和是否選中的
var todo = <String, bool>{};
複製程式碼
  • 定義一個狀態列舉
enum ShowType { 
    all, 
    todo, 
    done 
}
複製程式碼
  • 類中設定初始變數
class _TodoListState extends State<TodoList> {
  var todo = <String, bool>{};//列表資料
  var text;//當前輸入文字
  var showType = ShowType.all;//顯示型別
}
複製程式碼
1.4:根據資料形成列表

注意:如何Map獲取對應索引處的鍵,值。根據值的true/fase來控制decoration的有無

Widget formList(Map<String, bool> todo) {
    return ListView.builder(
      itemCount: todo.length,
      padding: EdgeInsets.all(8.0),
      itemExtent: 50.0,
      itemBuilder: (BuildContext context, int index) {
        var key = todo.keys.toList()[index];//鍵
        var value = todo.values.toList()[index];//值
        var text = Align(
          child: Text(
            todo.keys.toList()[index],
            style: TextStyle(
              decorationThickness: 3,
                decoration: value
                    ? TextDecoration.lineThrough
                    : TextDecoration.none,
                decorationColor: Colors.blue),
          ),
          alignment: Alignment.centerLeft,
        );

        return Card(
          child: Row(
            children: <Widget>[
              Checkbox(
                onChanged: (b) {
                 //Checkbox點選
                },
                value: todo.values.toList()[index],
              ),
              text
            ],
          ),
        );
      },
    );
  }
複製程式碼
1.5:拼組

這裡要注意，用Expanded包一下，ListView才能自延展自己的尺寸
直接寫的話啊，由於高度未知，會崩掉。

return Column(
  children: <Widget>[inputBtn, op, Expanded(child: formList(todo))],
);
複製程式碼

2.狀態的更新

2.1：鳥瞰全域性

這裡狀態有點亂，我畫了幅圖說明一下:

TodoList深入Flutter狀態管理(上篇)

狀態量有三個:text 輸入框的文字，todo列表資料，showType展現型別
1.輸入框通過監聽，改變text的值
2.在新增按鈕點選時，將加入到狀態值todo中 
3.todo用來渲染Todo列表，根據key和value展現資料和核取方塊狀態
4.核取方塊通過點選，改變todo的狀態，來顯示對勾以及文字下劃線
5.根據showType的不同，選擇過濾的方式。
6.在適宜的狀態值改變時，呼叫老夫的setState來更新
複製程式碼
2.2:輸入框監聽
onChanged: (str) {
  text = str;
},
複製程式碼
2.3:點選按鈕監聽

注意收起鍵盤的操作FocusScope.of(context).requestFocus(FocusNode());

onPressed: () {
  FocusScope.of(context).requestFocus(FocusNode()); //收起鍵盤
  if (text != null && text != "") {
    todo[text] = false;//為Map新增資料
    text = "";//輸入框文字清空
    setState(() {});
  }
},
複製程式碼
2.4:核取方塊點選
onChanged: (b) {
  todo[key] = b;
  setState(() {});
},
複製程式碼
2.5:過濾操作

想了好一會，才想到該如何過濾出想要的元素

showList(ShowType showType) {
  switch (showType) {
    case ShowType.all:
      return formList(todo);
      break;
    case ShowType.todo:
      return formList(Map.fromEntries(todo.entries.where((e) => !e.value)));
      break;
    case ShowType.done:
      return formList(Map.fromEntries(todo.entries.where((e) => e.value)));
      break;
  }
}
複製程式碼
2.6:拼合
return Column(
  children: <Widget>[inputBtn, op, Expanded(child: showList(showType))],
);
複製程式碼

3. 程式碼全覽

import 'package:flutter/material.dart';

class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}

enum ShowType { all, todo, done }

class _TodoListState extends State<TodoList> {
  var todo = <String, bool>{};//列表資料
  var text;//當前輸入文字
  var showType = ShowType.all;//顯示型別

  @override
  Widget build(BuildContext context) {
    var textField = TextField(
      controller: new TextEditingController(text: this.text),
      keyboardType: TextInputType.text,
      textAlign: TextAlign.start,
      maxLines: 1,
      cursorColor: Colors.black,
      cursorWidth: 3,
      style: TextStyle(
          fontSize: 16, color: Colors.lightBlue, backgroundColor: Colors.white),
      decoration: InputDecoration(
        filled: true,
        fillColor: Colors.white,
        hintText: '新增一個待辦項',
        hintStyle: TextStyle(color: Colors.black26, fontSize: 14),
        contentPadding: EdgeInsets.only(left: 14.0, bottom: 8.0, top: 8.0),
        focusedBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
        ),
        enabledBorder: UnderlineInputBorder(
          borderSide: BorderSide(color: Colors.white),
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
        ),
      ),
      onChanged: (str) {
        text = str;
      },
    );

    var btn = RaisedButton(
      child: Icon(Icons.add),
      padding: EdgeInsets.zero,
      onPressed: () {
        FocusScope.of(context).requestFocus(FocusNode()); //收起鍵盤
        if (text != null && text != "") {
          todo[text] = false;
          text = "";
          setState(() {});
        }
      },
    );

    var inputBtn = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          child: textField,
          width: 200,
        ),
        ClipRRect(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
          child: Container(
            child: btn,
            width: 36,
            height: 36,
          ),
        ),
      ],
    );

    var op = Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        RaisedButton(
          color: Colors.blue,
          textTheme: ButtonTextTheme.primary,
          onPressed: () {
            showType = ShowType.all;
            setState(() {});
          },
          child: Text("全部"),
        ),
        RaisedButton(
          onPressed: () {
            showType = ShowType.done;
            setState(() {});
          },
          child: Text("已完成"),
        ),
        RaisedButton(
          onPressed: () {
            showType = ShowType.todo;
            setState(() {});
          },
          child: Text("未完成"),
        ),
      ],
    );

    return Column(
      children: <Widget>[inputBtn, op, Expanded(child: showList(showType))],
    );
  }

  showList(ShowType showType) {
    switch (showType) {
      case ShowType.all:
        return formList(todo);
        break;
      case ShowType.todo:
        return formList(Map.fromEntries(todo.entries.where((e) => !e.value)));
        break;
      case ShowType.done:
        return formList(Map.fromEntries(todo.entries.where((e) => e.value)));
        break;
    }
  }

  Widget formList(Map<String, bool> todo) {
    return ListView.builder(
      itemCount: todo.length,
      padding: EdgeInsets.all(8.0),
      itemExtent: 50.0,
      itemBuilder: (BuildContext context, int index) {
        var key = todo.keys.toList()[index];
        var value = todo.values.toList()[index];
        var text = Align(
          child: Text(
            todo.keys.toList()[index],
            style: TextStyle(
              decorationThickness: 3,
                decoration: value
                    ? TextDecoration.lineThrough
                    : TextDecoration.none,
                decorationColor: Colors.blue),
          ),
          alignment: Alignment.centerLeft,
        );

        return Card(
          child: Row(
            children: <Widget>[
              Checkbox(
                onChanged: (b) {
                  todo[key] = b;
                  setState(() {});
                },
                value: todo.values.toList()[index],
              ),
              text
            ],
          ),
        );
      },
    );
  }
}

複製程式碼

到這裡效果就已經實現了，但是狀態值四溢，看著感覺有些難看。
壞的程式碼就相當於你有個女友，又醜又亂，又凶又惡,有事沒事給你找茬。
然而你還不得不一直面對她,問了你一句為什麼這麼傻，你含著淚說:"又不是不..."

結語

本文到此接近尾聲了，如果想快速嚐鮮Flutter，《Flutter七日》會是你的必備佳品;如果想細細探究它,那就跟隨我的腳步，完成一次Flutter之旅。
另外本人有一個Flutter微信交流群，歡迎小夥伴加入，共同探討Flutter的問題，本人微訊號:zdl1994328，期待與你的交流與切磋。

下一篇，將為你帶來如何對當前程式碼進行優化，讓狀態量更容易管理,敬請期待。

相關文章