flutter實現類似優惠券樣式

題記發表於2019-10-22
Flutter

先看圖示：

效果圖
其實要實現的就是左右兩邊的半圓跟虛線，flutter本身是沒有提供像css那樣的border style為dash直接實現，所以只能取巧實現，具體實現下面給出的程式碼參考了網上的寫法：

繪製虛線

這裡抽離出單獨可配置widget元件：

import 'package:flutter/material.dart';

class DashLine extends StatelessWidget {
  final double height;
  final Color color;
  final double totalWidth;

  const DashLine({this.height = 1, this.color = Colors.black, this.totalWidth});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
        final boxWidth = totalWidth??constraints.constrainWidth();
        final dashWidth = 5.0;
        final dashHeight = height;
        final dashCount = (boxWidth / (2 * dashWidth)).floor();
        return Flex(
          children: List.generate(dashCount, (_) {
            return SizedBox(
              width: dashWidth,
              height: dashHeight,
              child: DecoratedBox(
                decoration: BoxDecoration(color: color),
              ),
            );
          }),
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          direction: Axis.horizontal,
        );
      },
    );
  }
}
複製程式碼

繪製左右兩個半圓

其實就是繪製兩個圓，背景色設定跟頁面底色一樣，然後將其定位出盒子自身的一半

畫圓

Widget get CardCircle {
  return Container(
    width: 18,
    height: 18,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      color: AppColors.bg_gray, // 所有的顏色抽離到單獨一個顏色檔案方便管理
    ),
  );
}
複製程式碼

完整具體實現

        // 這裡要用sizebox而非container
        SizedBox(
            height: 18,
            child: Stack(
              alignment: Alignment.center,
              children: <Widget>[
                Padding(
                  child: const DashLine(color: AppColors.text_gray9,),
                  padding: EdgeInsets.symmetric(horizontal: 20),
                ),
                Positioned(
                  left: -9,
                  child: CardCircle,
                ),
                Positioned(
                  right: -9,
                  child: CardCircle,
                ),
              ],
            ),
          ),
複製程式碼

相關文章