【Flutter】时间轴高度自适应最佳实践

最新推荐文章于 2024-08-18 12:37:36 发布

Tech Ranger

最新推荐文章于 2024-08-18 12:37:36 发布

阅读量1.4k

点赞数 2

分类专栏： Flutter Android 文章标签： flutter

本文链接：https://blog.csdn.net/sinat_36955332/article/details/120858031

版权

本文介绍了在Flutter中创建时间轴的最佳实践，通过自定义canvas组件绘制圆圈和竖线，并在Container中使用decoration实现高度自适应的时间线效果。

摘要由CSDN通过智能技术生成

1 使用部件

画圆圈：使用 canvas.drawCircle 和属性为_paint.style = PaintingStyle.fill;画笔画两个实心圆；
画竖线：使用 canvas.drawLine 和属性为_paint.style = PaintingStyle.stroke;的画笔画直线，通过 p1 和 p2 两个端点使直线为竖线

在 Container 中调用 decoration 组件使用 BorderTimeLine 类。

decoration: BoxDecoration(border: BorderTimeLine(i)),

在这里插入图片描述

3 代码

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

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

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'TimeLine',
      home: _Home(),
    );
  }
}

class _Home extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(title: Text("TimeLineSimple")),
      body: Container(
          child: ListView.builder(
              itemBuilder: _buildItem,
              padding: EdgeInsets.symmetric(vertical: 20),
              itemCount: 20),
      ),
    );
  }

  Widget _buildItem(BuildContext c, int i) {
   
    return Container(
        width: double.infinity,
        padding: EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(border: BorderTimeLine(20)),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child