【Flutter學習】基本組件之進度條(LinearProgressIndicator, CircularProgressIndicator)

 

一，概述

　　基本有兩種類型：

• 條形進度條（LinearProgressIndicator）
  

  new LinearProgressIndicator(
  backgroundColor: Colors.blue,
  // value: 0.2,
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  ),
  new Container(padding: const EdgeInsets.all(20.0)),

• 圓形進度條（CircularProgressIndicator）
  

  new CircularProgressIndicator(
  strokeWidth: 4.0,
  backgroundColor: Colors.blue,
  // value: 0.2,
  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
  ),　　

 

注意：如果 value 為 null 或空，則顯示一個動畫，否則顯示一個定值。Progress 的值只能設置 0 ~ 1.0，如果大於 1，則表示已經結束。　

二，構造函數

• LinearProgressIndicator
  

  /**
   * 條形進度條
   * LinearProgressIndicator本身不能設置高度，可以包一層父容器設置高度來間接設置LinearProgressIndicator的高度，
   * 如Container，SizedBox等
   *
   * const LinearProgressIndicator({
      Key key,
      double value,//0~1的浮點數，用來表示進度多少;如果 value 為 null 或空，則顯示一個動畫，否則顯示一個定值
      Color backgroundColor,//背景顏色
      Animation<Color> valueColor,//animation類型的參數，用來設定進度值的顏色，默認為主題色
      String semanticsLabel,
      String semanticsValue,
      })
   */

• CircularProgressIndicator
  

  /**
   * 圓形進度條
   * 可以在外面包一層SizedBox，間接改變進度條的大小
   *const CircularProgressIndicator({
      Key key,
      double value,//0~1的浮點數，用來表示進度多少;如果 value 為 null 或空，則顯示一個動畫，否則顯示一個定值
      Color backgroundColor,//背景顏色
      Animation<Color> valueColor,//animation類型的參數，用來設定進度值的顏色，默認為主題色
      this.strokeWidth = 4.0,//進度條寬度
      String semanticsLabel,
      String semanticsValue,
      })
   */

三，demo

• LinearProgressIndicator
  

  body: ListView(
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
                child: LinearProgressIndicator(
                  value: 0.3,
                  backgroundColor: Color(0xff00ff00),
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
                child: LinearProgressIndicator(
  //                    value: 0.3,
                  backgroundColor: Color(0xffff0000),
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
                child: LinearProgressIndicator(
                  value: 0.3,
                  valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                  backgroundColor: Color(0xff00ff00),
                ),
              ),
              Container(
                padding: EdgeInsets.only(left: 50.0, right: 50.0, top: 50.0),
                child: Container(
                  height: 10.0,
                  child: LinearProgressIndicator(
                    value: 0.3,
                    valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                    backgroundColor: Color(0xff00ff00),
                  ),
                ),
              ),
            ],
          ),

• CircularProgressIndicator
  

  body: Stack(
              children: <Widget>[
                Positioned(
                    left: 150.0,
                    top: 20.0,
                    child: CircularProgressIndicator(
  //                    value: 0.3,
                      backgroundColor: Color(0xffff0000),
                    )
                ),
                Positioned(
                    left: 150.0,
                    top: 70.0,
                    child: CircularProgressIndicator(
                      value: 0.3,
                      backgroundColor: Color(0xffff0000),
                    )
                ),
                Positioned(
                    left: 150.0,
                    top: 120.0,
                    child: CircularProgressIndicator(
  //                    value: 0.3,
                      strokeWidth: 4.0,
                      backgroundColor: Color(0xffff0000),
                      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                    )
                ),
                Positioned(
                    left: 150.0,
                    top: 170.0,
                    child: CircularProgressIndicator(
  //                    value: 0.3,
                      strokeWidth: 8.0,
                      backgroundColor: Color(0xffff0000),
                      valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                    )
                ),
                Positioned(
                    left: 150.0,
                    top: 220.0,
                    child: SizedBox(
                      width: 50.0,
                      height: 50.0,
                      child: CircularProgressIndicator(
  //                    value: 0.3,
                        backgroundColor: Color(0xffff0000),
                        valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                      ),
                    )
                ),
              ],
            )