時鐘這個東西很奇妙，總能當做創(chuàng)意實現(xiàn)的入口，比如這個大神用compose實現(xiàn)了一個小創(chuàng)意時鐘

看下效果

習慣把Compose這種組合聲明的開發(fā)方式叫熱插拔，節(jié)省了大量代碼，簡化了開發(fā)，尤其Modifier這個神奇的東西，熟悉了解決一切樣式的問題。

看了下他的源碼，很簡單，百十行左右，不多說，用Flutter仿一份?；蛘吣阌X得簡單直接看GitHub歡迎批評指正

本案例使用的環(huán)境是：

Flutter (Channel stable, 2.2.3, on macOS 11.0.1 20B29 darwin-arm, locale zh-Hans-CN)
    • Flutter version 2.2.3 at /Users/moon/Documents/sdk/flutter
    • Framework revision f4abaa0735 (2 months ago), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4
    • Pub download mirror https://pub.flutter-io.cn
    • Flutter download mirror https://storage.flutter-io.cn

1.構建一個代表時間的小格子

一個最普通的Container 里包含一個text

_Number() {
  return Container(
    width: 40,
    height: 40,
    child: Text(
      "5",
      style: TextStyle(color: Colors.white, fontSize: 16),
    ),
  );
}

通過看上邊的gif圖就能設計出來，小格子是有狀態(tài)的，是當前的時間點數(shù)字的話背景色改變，同時也可以讓這個數(shù)字的字體變大一點，區(qū)別于其他數(shù)字，而且他會在所在的列里位于屏幕的中部。 所以先簡單封裝下這個小格子。

_Number(int number, bool isActive) {
  var backgroundColor;
  var numberSize;
  if (isActive) {
    backgroundColor = Colors.black;
    numberSize = 18.0;
  } else {
    backgroundColor = Colors.deepPurpleAccent;
    numberSize = 16.0;
  }

  return Container(
    alignment: Alignment.center,
    width: _normalSize,
    height: _normalSize,
    child: Text(
      "$number",
      style: TextStyle(color: Colors.white, fontSize: numberSize),
    ),
  );

2.構建一列小格子

既然是幾列數(shù)字條構成的一個時鐘，所以想下大概是繪制出一條就可以了，其他的幾個傳不同的數(shù)字和狀態(tài)就可以， Compose里用column，F(xiàn)lutter里同樣有這個東西，當然用listview 或其他的容器都可以。

child: Column(
  children: [
      _Number(1 , false,),
      _Number(2 , false,),
      _Number(3 , false,),
      _Number(4 , false,),
      _Number(5 , true,),
  ],
))

為了美觀可以切個圓角，這點compose的modifier就體現(xiàn)出了優(yōu)勢， 可以直接clip column，但Flutter卻沒那么強大，只能根據(jù)位置對每個小格子單獨處理了。

if (number == 0) {
  borderRadius = BorderRadius.only(
      topLeft: Radius.circular(15), topRight: Radius.circular(15));
} else if (number == (totalSize - 1)) {
  borderRadius = BorderRadius.only(
      bottomLeft: Radius.circular(15), bottomRight: Radius.circular(15));
} else {
  borderRadius = BorderRadius.all(Radius.zero);
}

decoration: BoxDecoration(
  color: backgroundColor,
  borderRadius: borderRadius,
),

或許還有其簡單方式設置邊角，請朋友提示。

3.構建多列小格子

同理搞出六列格子，代表雙位的時分秒，可以用row 包裹六個 column ，設置外層container的子widget都居中，接受當前時間作為狀態(tài)，突出顯示就可以了。 比如現(xiàn)在是21：49：15

這樣就畫出了一個單獨的靜態(tài)時間刻度。

4.關于Align

這個圖好像不太對，一種亂糟糟的感覺，需要能一眼看出當前時間才行，即把所有時間對齊在一條線上。

這方面Compose 發(fā)揮了優(yōu)勢， modifier的 offset 可以輕松實現(xiàn)位移。

val mid = (range.last - range.first) / 2f 
val offset = 40.dp * (mid - current)
Modifier .offset(y = offset)

flutter 里貌似沒這么方便了，怎么實現(xiàn)呢，我使用了Align組件，簡單說明下， 以下摘自官方。

Align 組件可以調(diào)整子組件的位置，并且可以根據(jù)子組件的寬高來確定自身的的寬高，定義如下：

Align({
  Key key,
  this.alignment = Alignment.center,
  this.widthFactor,
  this.heightFactor,
  Widget child,
})

• alignment : 需要一個AlignmentGeometry類型的值，表示子組件在父組件中的起始位置。AlignmentGeometry 是一個抽象類，它有兩個常用的子類：Alignment和 FractionalOffset。
• widthFactor和heightFactor是用于確定Align 組件本身寬高的屬性；它們是兩個縮放因子，會分別乘以子元素的寬、高，最終的結果就是Align 組件的寬高。如果值為null，則組件的寬高將會占用盡可能多的空間。

舉例如下

Container(
  height: 120.0,
  width: 120.0,
  color: Colors.blue[50],
  child: Align(
    alignment: Alignment.topRight,
    child: FlutterLogo(
      size: 60,
    ),
  ),
)

我顯式指定了Container的寬、高都為120。如果我不顯式指定寬高，而通過同時指定widthFactor和heightFactor 為2也是可以達到同樣的效果：

Align(
  widthFactor: 2,
  heightFactor: 2,
  alignment: Alignment.topRight,
  child: FlutterLogo(
    size: 60,
  ),
),

5.對齊時間線

分析，Align實際上就是把原高度擴大為之前的 heightFactor 倍數(shù)，而它的子widget仍然處于Align的頂部,而當前時間點位于column頂部的距離是已知的，所以要讓當前時間點的數(shù)字定位于 Align的中間 ，需要補齊（或截掉）當前時間點的格子下邊的空間。 為了示意明確，我給總體背景和 Align 背景都加了顏色。

第一列： 小時首位，只有三個格子， 當前是2， 2位于第三個，所以需要給下邊補齊兩個格子， 第二列：小時的末位，共有10個格子，當前數(shù)字也是2 ，也位于第三個，為了讓上下相等，需要截掉4以下的數(shù)字，讓2位于中間位置。

以此類推。

這下就可以發(fā)現(xiàn)規(guī)律了。 高度的系數(shù)因子為 ：

(current * 2 + 1)/numbers.length

numbers.length 是列的長度。 因此， 每列的函數(shù)可以寫為

_columnNumber(List<int> numbers, int current) {
  List<Widget> list = [];
  numbers.forEach((e) {
    list.add(_Number(e, e == current, numbers.length));
  });

  return Container(
    color: Colors.white,
    child: Align(
      alignment: Alignment.topCenter,
      widthFactor: 1,
      heightFactor: (current *2 + 1)/numbers.length,
      child: Container(
        height: numbers.length * _normalSize,
        margin: EdgeInsets.only(left: 5, right: 5),
        child: Column(
          children: list,
        )),
    ),
  );
}

至此一個靜態(tài)時間鐘就繪制完成。

6.動起來

獲取當前時間，開啟計時器，每秒刷新一次就可以實現(xiàn)動態(tài)效果了 這個比較簡單，不再復述了。

完整代碼

總結下： Compose 和 Flutter、SwiftUI都是聲明式UI，良好的設計已經(jīng)確定了是發(fā)展趨勢， 同時上手簡單，更能把精力專注在業(yè)務上。

以上就是Android Flutter實現(xiàn)創(chuàng)意時鐘的示例代碼的詳細內(nèi)容，更多關于Android Flutter時鐘的資料請關注腳本之家其它相關文章！

最新評論