Flutter分段显示插件segment_display的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter分段显示插件segment_display的使用

简介

segment_display 是一个用于 Flutter 的分段显示插件，支持多种类型的分段显示（如7段、14段和16段）以及自定义分段样式。该插件适用于需要模拟数码管显示效果的应用场景。

Segment display

特性

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

安装

1. 依赖它

在你的 pubspec.yaml 文件中添加以下内容：

dependencies:
  segment_display: ^0.5.0

2. 安装它

你可以通过命令行安装包：

$ flutter packages get

或者，你的编辑器可能支持 flutter packages get。请查阅你的编辑器文档以获取更多信息。

3. 导入它

现在在你的 Dart 代码中可以使用：

import 'package:segment_display/segment_display.dart';

使用

七段显示

示例

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

Seven-segment display

十四段显示

示例

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

Fourteen-segment display

十六段显示

示例

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

Sixteen-segment display

样式和自定义

你可以通过以下属性来自定义分段显示：

  • 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 DefaultSegmentStyle
  • HexSegmentStyle HexSegmentStyle
  • RectSegmentStyle RectSegmentStyle

自定义分段样式

要创建自己的分段样式（形状），可以扩展 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段显示中的顶部分段形状，只需覆盖 createPath7A 方法。

class CustomSegmentStyle extends SegmentStyle {

  // ...

  @override
  Path createPath7A(Size segmentSize, double padding) {
    // 实现顶部分段路径
  }

  // ...

}

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 segment_display 插件：

import 'package:flutter/material.dart';
import 'package:segment_display/segment_display.dart';
import 'package:intl/intl.dart';

void main() => runApp(const App(title: 'Segment display example'));

class App extends StatefulWidget {
  const App({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  late int _displayType;
  late SegmentStyle _segmentStyle;
  late Color _accentColor;
  late String _text;
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    _accentColor = const Color(0xFFFF0000);
    _displayType = 0;
    _segmentStyle = DefaultSegmentStyle(
      enabledColor: _accentColor,
      disabledColor: _accentColor.withOpacity(0.15),
    );
    _text = 'HELLO';
    _controller = TextEditingController();
    _controller.value = TextEditingValue(text: _text);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _changeSegmentStyle(SegmentStyle segmentStyle) {
    setState(() {
      _segmentStyle = segmentStyle;
    });
  }

  void _changeDisplayType(int type) {
    setState(() {
      _displayType = type;
    });
  }

  void _changeColor(Color color) {
    setState(() {
      _accentColor = color;
      _segmentStyle = _segmentStyle.copyWith(
        enabledColor: _accentColor,
        disabledColor: _accentColor.withOpacity(0.15),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: widget.title,
      theme: ThemeData(
        accentColor: _accentColor,
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text(widget.title),
          actions: <Widget>[
            PopupMenuButton<SegmentStyle>(
              tooltip: 'Segment style',
              icon: const Icon(Icons.style),
              onSelected: _changeSegmentStyle,
              itemBuilder: (context) {
                return [
                  PopupMenuItem<SegmentStyle>(
                    value: DefaultSegmentStyle(
                      enabledColor: Theme.of(context).accentColor,
                      disabledColor: Theme.of(context).accentColor.withOpacity(0.15),
                    ),
                    child: const Text('Default'),
                  ),
                  PopupMenuItem<SegmentStyle>(
                    value: RectSegmentStyle(
                      enabledColor: Theme.of(context).accentColor,
                      disabledColor: Theme.of(context).accentColor.withOpacity(0.15),
                    ),
                    child: const Text('Rect'),
                  ),
                  PopupMenuItem<SegmentStyle>(
                    value: HexSegmentStyle(
                      enabledColor: Theme.of(context).accentColor,
                      disabledColor: Theme.of(context).accentColor.withOpacity(0.15),
                    ),
                    child: const Text('Hex'),
                  ),
                ];
              },
            ),
            PopupMenuButton<int>(
              tooltip: 'Display type',
              icon: const Icon(Icons.filter_7),
              onSelected: _changeDisplayType,
              itemBuilder: (context) {
                return [
                  const PopupMenuItem<int>(value: 0, child: Text('7-segment')),
                  const PopupMenuItem<int>(value: 1, child: Text('14-segment')),
                  const PopupMenuItem<int>(value: 2, child: Text('16-segment')),
                ];
              },
            ),
            PopupMenuButton<Color>(
              tooltip: 'Color',
              icon: const Icon(Icons.color_lens),
              onSelected: _changeColor,
              itemBuilder: (context) {
                return [
                  const PopupMenuItem<Color>(
                    value: Color(0xFFFF0000),
                    child: Text('Red'),
                  ),
                  const PopupMenuItem<Color>(
                    value: Color(0xFF00FF00),
                    child: Text('Green'),
                  ),
                  const PopupMenuItem<Color>(
                    value: Color(0xFF0000FF),
                    child: Text('Blue'),
                  ),
                  const PopupMenuItem<Color>(
                    value: Color(0xFF00FFFF),
                    child: Text('Cyan'),
                  ),
                  const PopupMenuItem<Color>(
                    value: Color(0xFFFFFF00),
                    child: Text('Yellow'),
                  ),
                  const PopupMenuItem<Color>(
                    value: Color(0xFFFFFFFF),
                    child: Text('White'),
                  ),
                ];
              },
            ),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              _Display(
                value: DateFormat('HH:mm').format(DateTime.now()),
                size: 7.0,
                type: _displayType,
                style: _segmentStyle,
              ),
              const SizedBox(height: 100),
              _Display(
                value: _text,
                size: 7.0,
                type: _displayType,
                style: _segmentStyle,
              ),
              const SizedBox(height: 50),
              SizedBox(
                width: 250.0,
                child: TextField(
                  controller: _controller,
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Change me',
                  ),
                  maxLength: 20,
                  onChanged: (String text) async {
                    setState(() => _text = text.isEmpty ? ' ' : text);
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _Display extends StatelessWidget {
  final String value;
  final int type;
  final double size;
  final SegmentStyle style;

  const _Display({
    Key? key,
    required this.value,
    required this.type,
    required this.style,
    required this.size,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final displays = [
      SevenSegmentDisplay(value: value, size: size, segmentStyle: style),
      FourteenSegmentDisplay(value: value, size: size, segmentStyle: style),
      SixteenSegmentDisplay(value: value, size: size, segmentStyle: style),
    ];

    return displays[type];
  }
}

希望这个示例对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时联系我。


更多关于Flutter分段显示插件segment_display的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter分段显示插件segment_display的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用segment_display插件的一个代码示例。这个插件通常用于创建类似于七段显示器的UI组件。

首先，确保你的Flutter项目已经添加了segment_display依赖。你可以在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  segment_display: ^最新版本号  # 替换为当前最新版本号

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中创建一个使用SegmentDisplay组件的示例。以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:segment_display/segment_display.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Segment Display Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _number = 0;

  void _incrementNumber() {
    setState(() {
      _number = (_number + 1) % 10; // 只显示0到9的数字
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Segment Display Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SegmentDisplay(
              number: _number,
              width: 100,
              height: 200,
              colorOn: Colors.blue,
              colorOff: Colors.black,
              strokeWidth: 5.0,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _incrementNumber,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了segment_display包。
  2. 创建了一个简单的Flutter应用，包含一个SegmentDisplay组件和一个按钮。
  3. SegmentDisplay组件用于显示一个0到9之间的数字。我们通过number属性设置当前显示的数字。
  4. width和height属性用于设置显示组件的宽度和高度。
  5. colorOn和colorOff属性分别用于设置段点亮和熄灭时的颜色。
  6. strokeWidth属性用于设置段的宽度。
  7. 按钮点击时会调用_incrementNumber方法，该方法会更新当前显示的数字。

运行这个应用，你会看到一个七段显示器，点击按钮会在0到9之间循环显示数字。

请确保你已经正确安装并导入了segment_display包，并根据需要调整代码中的样式和属性。

回到顶部