一、老套路，先看样式

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

二、讲解

1.结构拆分

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

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

Stack ：重叠组件

VerticalDivider：竖线

BoxDecoration：圆圈

Column，Row，Text，Padding等

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

Widget getItem() {

return Container(

height: 70,

child: Row(

children: [

Container(

height: 70,

width: 20,

child: leftItem(),

),

Padding(

padding: const EdgeInsets.only(left: 20),

child: rightItem(),

),

],

),

);

}

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

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

3.左边的stack图形样式

return Stack(

children: [

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 {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

leading: new IconButton(

icon: new Icon(Icons.arrow_back),

),

centerTitle: true,

title: Text(

'我的时光轴',

),

actions: [

IconButton(

icon: Icon(Icons.edit),

),

],

),

body: Padding(

padding: const EdgeInsets.all(10.0),

child: ListView(

children: [

getItem(),

getItem(),

getItem(),

],

),

));

}

Widget getItem() {

return Container(

height: 70,

child: Row(

children: [

Container(

height: 70,

width: 20,

child: leftItem(),

),

Padding(

padding: const EdgeInsets.only(left: 20),

child: rightItem(),

),

],

),

);

}

Widget leftItem() {

return Stack(

children: [

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: [

Container(

child: Row(

children: [

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,

)),

],

);

}

}

持续更新中......