flutter筆記匯總

CheckBox繼承自StatelessWidget，是個無狀態(tài)組件，本身不會保存狀態(tài)，所以需要一個有狀態(tài)的父組件用來保存這個狀態(tài)。

CheckBox

先看constructor

CheckBox({
  Key key,
  @required bool value,                  //復(fù)選框的值
  bool tristate: false,                     //為true時復(fù)選框會多一個值為null的狀態(tài)，復(fù)選框內(nèi)顯示為橫線
  @required ValueChanged<bool> onChanged,    //點擊復(fù)選框的回調(diào)
  Color activeColor,                      //選中時復(fù)選框的顏色
  Color checkColor,                      //選中時對號的顏色
  MaterialTapTargetSize materialTapTargetSize    //有效點擊區(qū)域的大小
})

看demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: CheckboxDemo()
      )
    );
  }
}

class CheckboxDemo extends StatefulWidget {
  @override
  _CheckboxDemoState createState() => new _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {
  bool _checkboxSelected = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: Checkbox(
        value: _checkboxSelected,
        activeColor: Colors.red,
        checkColor: Colors.yellow,
        tristate: true,
        onChanged:(value){
          print(value);
          setState(() {
            _checkboxSelected=value;
          });
        } ,
      )
    );
  }
}

屏幕正中間一個小方塊，就是Checkbox。
這個比較簡單，Color已經(jīng)很熟練了，基本上大部分可視組件都有，一個value還有個onChanged回調(diào)。

tristate之前沒見過，值為false的時候，復(fù)選框有兩種狀態(tài)，對應(yīng)兩個值true和false；值為true的時候有三種狀態(tài)，對應(yīng)三個值true、null、false。

這里用了有狀態(tài)組件StatefulWidget作為父組件，又在父組件里創(chuàng)建了state，狀態(tài)有子組件管理，在onChanged事件里setState改變狀態(tài)，這里和react很像。

上邊已經(jīng)用了value、onChanged接下來看一下Switch的其他屬性。
一個復(fù)選框就這么寫完了，但是不能就放一個框啊，要有文字，沒有文字誰知道這個框選中是要干啥，有可能還需要個圖標(biāo)，后邊學(xué)了布局用flex很容易可以實現(xiàn)。
有人說我不想每次都重復(fù)寫這么個布局，雖然不多但是每次都一樣寫著煩，flutter在這里體現(xiàn)出了人性化，提供了一個可以帶文字和圖標(biāo)的復(fù)選框組件CheckboxListTile。

CheckboxListTile

先來看一下constructor

const CheckboxListTitle({
  Key key,
  @required bool value,
  @required ValueChanged<bool> onChanged,
  Color activeColor,
  Widget title,                    //復(fù)選框的主標(biāo)題
  Widget subtitle,                  //復(fù)選框的副標(biāo)題
  bool isThreeLine: false,          //文字是否為三行
  bool dense,                        //是否為垂直密集列表的一部分
  Widget secondary,                //圖標(biāo)
  bool selected: false,              //文字和圖標(biāo)顏色是否為選中的顏色(activeColor)
  ListTileControlAffinity controlAffinity: ListTileControlAffinity.platform    //文字、圖標(biāo)、復(fù)選框的排列順序
});

看一下demo

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: Scaffold(
        body: CheckboxDemo()
      )
    );
  }
}

class CheckboxDemo extends StatefulWidget {
  @override
  _CheckboxDemoState createState() => new _CheckboxDemoState();
}

class _CheckboxDemoState extends State<CheckboxDemo> {
  bool _checkboxSelected = false;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CheckboxListTile(
        value: _checkboxSelected,
        title: Text('this is title'),
        subtitle: Text('this is subtitle'),
        activeColor: Colors.red,
        dense: true,
        selected: true,
        isThreeLine: false,
        secondary: Icon(Icons.book),
        controlAffinity: ListTileControlAffinity.leading,
        onChanged:(value){
          print(value);
          setState(() {
            _checkboxSelected=value;
          });
        } ,
      )
    );
  }
}

重復(fù)的就不說了。

title & subtitle

這兩個放一起，都是復(fù)選框的文字描述，一主一次。

dense

如果為true，表示這個復(fù)選框是一個列表的一部分，會縮小字體。
為false時則是默認大小

isThreeLine

是否為三行，這是個坑。
首先要搭配subtitle使用，沒有subtitle的話報錯。
然后就是這個坑了，不是文字以三行顯示，而是告訴程序，我現(xiàn)在的文字(title)是不是有三行。。。

title只有一行

isThreeLine為false

image.png

image.png

title為三行

isThreeLine為false

image.png

image.png

title為兩行和一行的情況顯示是相同的，最多就是三行，超過三行的文字不會顯示，會被剪切。
實際上isThreeLine是設(shè)置title和subtitle同時存在時文字在垂直方向的顯示方式。

secondary

圖標(biāo)，可以不設(shè)置。

controlAffinity

復(fù)選框、文字、圖標(biāo)的排列順序，有三個值。
leading：復(fù)選框在前，文字在中間圖標(biāo)在最后。
trailing：復(fù)選框在后，文字在中間圖標(biāo)在前。
platform：這個是根據(jù)不同平臺的默認情況自己調(diào)整。

CheckBox和CheckboxListTile相對其他組件來說簡單一點，但是這里涉及到了StatefulWidget，在之前的筆記里沒出現(xiàn)過，需要仔細想一下。