快捷導(dǎo)航

Android?Flutter實(shí)現(xiàn)創(chuàng)意時(shí)鐘的示例代碼

更新時(shí)間：2023年03月30日 16:11:09 作者：_小豬睡枕頭_

時(shí)鐘這個(gè)東西很奇妙，總能當(dāng)做創(chuàng)意實(shí)現(xiàn)的入口。這篇文章主要介紹了如何通過(guò)Android?Flutter實(shí)現(xiàn)一個(gè)創(chuàng)意時(shí)鐘，感興趣的小伙伴可以了解一下

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.構(gòu)建一個(gè)代表時(shí)間的小格子

一個(gè)最普通的Container 里包含一個(gè)text

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

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

_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.構(gòu)建一列小格子

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

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

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

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,
),

或許還有其簡(jiǎn)單方式設(shè)置邊角，請(qǐng)朋友提示。

3.構(gòu)建多列小格子

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

這樣就畫(huà)出了一個(gè)單獨(dú)的靜態(tài)時(shí)間刻度。

4.關(guān)于Align

這個(gè)圖好像不太對(duì)，一種亂糟糟的感覺(jué)，需要能一眼看出當(dāng)前時(shí)間才行，即把所有時(shí)間對(duì)齊在一條線上。

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

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

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

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

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

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

舉例如下

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

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

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

5.對(duì)齊時(shí)間線

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

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

以此類推。

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

(current * 2 + 1)/numbers.length

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

_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,
        )),
    ),
  );
}