手機直播原始碼，Flutter 自定義 虛線 分割線

手機直播原始碼，Flutter 自定義 虛線 分割線

學習使用Flutter 進行 虛線 自定義控制元件 練習

// 自定義虛線 （預設是垂直方向）
class DashedLind extends StatelessWidget {
  final Axis axis; // 虛線方向
  final double dashedWidth; // 根據虛線的方向確定自己虛線的寬度
  final double dashedHeight; // 根據虛線的方向確定自己虛線的高度
  final int count; // 內部會根據設定的個數和寬度確定密度(虛線的空白間隔)
  final Color color; // 虛線的顏色
  const DashedLind({super.key,
    required this.axis,
    this.dashedWidth = 1,
    this.dashedHeight = 1,
    this.count = 10,
    this.color = const Color(0xffaaaaaa)
  });
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      // 根據寬度計算個數
      return Flex(
        direction: axis,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: List.generate(count, (_) {
        return SizedBox(
          width: dashedWidth,
          height: dashedHeight,
          child: DecoratedBox(
            decoration: BoxDecoration(color: color),
          ),
        );
      }),);
    });
  }
}

使用方法：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      // 腳手架
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            Container (
              height: 200,
              child: const DashedLind(
                axis:Axis.vertical, // 垂直方向設定
                dashedHeight: 8,
                count: 12,
                color: Colors.red,
              ),
            ),
            Container(
              width: 200,
              child: const DashedLind(
                axis: Axis.horizontal, // 水平方向設定
                dashedWidth: 6,count: 15,
                color: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}

 以上就是手機直播原始碼，Flutter 自定義 虛線 分割線， 更多內容歡迎關注之後的文章