手机直播源码,Flutter 自定义 虚线 分割线

手机直播源码,Flutter 自定义 虚线 分割线

学习使用Flutter 进行 虚线 自定义控件 练习

 

1
<br>// 自定义虚线 (默认是垂直方向)<br>class DashedLind extends StatelessWidget {<br>  final Axis axis; // 虚线方向<br>  final double dashedWidth; // 根据虚线的方向确定自己虚线的宽度<br>  final double dashedHeight; // 根据虚线的方向确定自己虚线的高度<br>  final int count; // 内部会根据设置的个数和宽度确定密度(虚线的空白间隔)<br>  final Color color; // 虚线的颜色<br>  const DashedLind({super.key,<br>    required this.axis,<br>    this.dashedWidth = 1,<br>    this.dashedHeight = 1,<br>    this.count = 10,<br>    this.color = const Color(0xffaaaaaa)<br>  });<br>  @override<br>  Widget build(BuildContext context) {<br>    return LayoutBuilder(<br>        builder: (BuildContext context, BoxConstraints constraints) {<br>      // 根据宽度计算个数<br>      return Flex(<br>        direction: axis,<br>        mainAxisAlignment: MainAxisAlignment.spaceBetween,<br>        children: List.generate(count, (_) {<br>        return SizedBox(<br>          width: dashedWidth,<br>          height: dashedHeight,<br>          child: DecoratedBox(<br>            decoration: BoxDecoration(color: color),<br>          ),<br>        );<br>      }),);<br>    });<br>  }<br>} 

使用方法:

 

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

 

 以上就是手机直播源码,Flutter 自定义 虚线 分割线, 更多内容欢迎关注之后的文章

 

posted @   云豹科技-苏凌霄  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
历史上的今天:
2022-10-31 视频直播网站源码,uniapp页面跳转的几种方法和区别
2022-10-31 直播带货源码,js实现整数和小数分开并添加不同的样式
2022-10-31 直播平台软件开发,弹出半角遮罩层
点击右上角即可分享
微信分享提示