用flutter很简单的实现一个时光轴样式【flutter20个实例之五】

sinnoo

发布于 2020-11-13 16:02:22

7910

发布于 2020-11-13 16:02:22

文章被收录于专栏：技术人生技术人生

一、老套路，先看样式

左边图是我业务中的样式，右边图是下方源码展示样式（复制可直接运行，无额外组件引入）

二、讲解

1.结构拆分

首先我们来拆分下结构，无非就两个主要部分，一个是左边竖线和圆形图，一个是右边的内容

分析下大概用到以下组件：

Stack ：重叠组件

VerticalDivider：竖线

BoxDecoration：圆圈

Column，Row，Text，Padding等

2.先实现下整体的样式布局

  Widget getItem() {
    return Container(
      height: 70,
      child: Row(
        children: <Widget>[
          Container(
            height: 70,
            width: 20,
            child: leftItem(),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: rightItem(),
          ),
        ],
      ),
    );
  }

说明：根部的container设置高度，是因为竖线的包裹组件需要一个指定高度，所以我们列表的每个list需要设置高度

设置一个Row，左边是图形，右边是内容

3.左边的stack图形样式

    return Stack(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(left: 1),
          child: VerticalDivider(
            thickness: 2,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 0, top: 20),
          child: Container(
            width: 20,
            height: 20,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.orange,
            ),
          ),
        ),
      ],
    );

通过VerticalDivider的属性设置一个属性，宽度设置为2，当前还有其他的一些属性，可以翻看文档

需要注意的是：

【1】stack的父组件宽度设置为20，高度为70，那么竖线出来的效果高度也为70，横向位置在中间

【2】为了竖线在圆圈的中心穿过，圆圈宽高需要都设置为20，距离顶部在25，圆圈会位于竖线中心位置

这些数字可以改，但是要保持之前关系，可以进行调试查看效果

4.右边的内容相对比较简单

主要是一些column和row组件来设置布局了

里面涉及的一些组件的含义和属性，可以翻看文档熟悉

三、源码（可直接运行调试）

import 'package:flutter/material.dart';

class MyTest extends StatefulWidget {
  @override
  _MyTestState createState() => _MyTestState();
}

class _MyTestState extends State<MyTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: new IconButton(
            icon: new Icon(Icons.arrow_back),
          ),
          centerTitle: true,
          title: Text(
            '我的时光轴',
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.edit),
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(10.0),
          child: ListView(
            children: <Widget>[
              getItem(),
              getItem(),
              getItem(),
            ],
          ),
        ));
  }

  Widget getItem() {
    return Container(
      height: 70,
      child: Row(
        children: <Widget>[
          Container(
            height: 70,
            width: 20,
            child: leftItem(),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20),
            child: rightItem(),
          ),
        ],
      ),
    );
  }

  Widget leftItem() {
    return Stack(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(left: 1),
          child: VerticalDivider(
            thickness: 2,
          ),
        ),
        Padding(
          padding: EdgeInsets.only(left: 0, top: 25),
          child: Container(
            width: 20,
            height: 20,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.orange,
            ),
          ),
        ),
      ],
    );
  }

  Widget rightItem() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          child: Row(
            children: <Widget>[
              Text('我是一个标题'),
              Padding(
                padding: const EdgeInsets.only(left: 20),
                child: Text(
                  '2020-08-07 18:00:00',
                  style: TextStyle(color: Colors.black38),
                ),
              ),
            ],
          ),
        ),
        Text(
          '这里放一些描述信息',
          style: TextStyle(color: Colors.black54, fontSize: 12),
        ),
        Container(
            width: 300,
            child: Divider(
              height: 24,
            )),
      ],
    );
  }
}

持续更新中......

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度