段式显示小部件

用于 Flutter 的段显示小部件。支持多种类型的段显示和段自定义。

特点

  • 7段显示
  • 14段显示
  • 16段显示
  • 可自定义段样式（段样式）
  • 支持.（小数点）和:（冒号）字符

请参阅Web演示。

注意：Flutter Web支持目前处于Beta阶段，您可能会遇到一些问题。

安装

  1. 依赖它

将此添加到您的 package 的 pubspec.yaml 文件中

dependencies:
  segment_display: ^0.4.1
  1. 安装它

您可以从命令行安装包

$ flutter packages get

或者，您的编辑器可能支持 flutter packages get。请查看您编辑器的文档了解更多信息。

  1. 导入它

现在，在您的 Dart 代码中，您可以使用

import 'package:segment_display/segment_display.dart';

用法

七段显示

示例

SevenSegmentDisplay(
  value: "123",
  size: 12.0,
)

seven

十四段显示

示例

FourteenSegmentDisplay(
  value: "123",
  size: 12.0,
)

fourteen-1

十六段显示

示例

SixteenSegmentDisplay(
  value: "123",
  size: 12.0,
)

sixteen

样式和自定义

您可以使用以下方式自定义段式显示

  • characterSpacing - 各字符之间的间距
  • backgroundColor - 显示背景颜色
  • segmentStyle - 段的样式（形状、颜色等），请参阅段样式

示例

SevenSegmentDisplay(
  text: "123",
  textSize: 12.0,
  characterSpacing: 10.0,
  backgroundColor: Colors.transparent,
  segmentStyle: HexSegmentStyle(
    enabledColor: Colors.red,
    disabledColor: Colors.red.withOpacity(0.15),
  ),
)

段样式

要更改段的颜色、大小或形状，请使用段样式。

有以下段样式

  • DefaultSegmentStyle
    style_default
  • HexSegmentStyle
    style_hex
  • RectSegmentStyle
    style_rect

您也可以创建自己的样式（形状） - 请参阅自定义段样式

示例

SevenSegmentDisplay(
  value: "13:37",
  size: 12.0,
  segmentStyle: HexSegmentStyle(
    enabledColor: const Color(0xFF00FF00),
    disabledColor: const Color(0xFF00FF00).withOpacity(0.15),
    segmentBaseSize: const Size(1.0, 2.0),
  ),
)

style

  • enabledColor - 启用段的颜色
  • disabledColor - 禁用段的颜色
  • segmentBaseSize - 段的大小比例；Size(1.0, 2.0)基本上意味着比例为1:2（宽度：长度）

注意：SegmentStyle.segmentBaseSize * SegmentDisplay.textSize = segmentSize

自定义段样式

要创建自己的段样式（形状），请继承SegmentStyle类并实现方法
createHorizontalPath、createVerticalPath、createDiagonalBackwardPath和createDiagonalForwardPath。

class CustomSegmentStyle extends SegmentStyle {

  const CustomSegmentStyle({
    Size segmentBaseSize,
    Color enabledColor,
    Color disabledColor,
  }) : super(
          segmentBaseSize: segmentBaseSize,
          enabledColor: enabledColor,
          disabledColor: disabledColor,
        );
  @override
  Path createHorizontalPath(SegmentPosition position, Size segmentSize) {
    // ...
  }
  
  @override
  Path createVerticalPath(SegmentPosition position, Size segmentSize) {
    // ...
  }
  
  @override
  Path createDiagonalBackwardPath(SegmentPosition position, Size segmentSize) {
    // ...
  }
  
  @override
  Path createDiagonalForwardPath(SegmentPosition position, Size segmentSize) {
    // ...
  }
}

您还可以通过重写createPath**方法来定制单个段的形状。
对于7段显示，有createPath7*方法；对于14段显示，有createPath14*方法，以此类推。

示例：如果您想更改7段显示顶部段的形状，只需重写createPath7A方法即可。

class CustomSegmentStyle extends SegmentStyle {

  // ..
  
  @override
  Path createPath7A(Size segmentSize, double padding) {
    // ...
  }
  
  // ...
  
}

注意：createPath**方法默认使用createHorizontalPath/createVerticalPath/createDiagonalBackwardPath/createDiagonalForwardPath，因此您不必重写所有createPath7*方法。

GitHub

https://github.com/janstol/flutter_segment_display