flutter之item 时间轴设计

实现效果

时间轴样式设计，本文具体实现内容为下图红色画框部分。

item实现过程

具体item实现元素为如下：

1、时间轴：可以用Container或 VerticalDivider来画，因为这里想添加圆弧效果，用Container来描述：

                        Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.red[400],//400度的红色
                              borderRadius:
                                  BorderRadius.all(Radius.circular(4.0))),//4度圆弧
                          margin: EdgeInsets.only(bottom: 50),//向底部隔50 pixels
                          width: 4,//宽度
                        ),

2、可以加载icon的中间节点IMG：

                        Container(
                          width: 30,
                          height: 30,
                          alignment: Alignment.center,//居中
                          margin: EdgeInsets.all(10.0),
                          child: Icon(
                            _icon,//加载icon
                            color: Colors.white,
                          ),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,//采用圆形
                            color: Colors.yellow,
                            gradient: LinearGradient(
                              colors: [Colors.red, Colors.yellow],//颜色从红到黄渐变
                            ),
                          ),
                        ),

3、时间Text控件（Postioned定位）：

                        Positioned(
                            left: 45,
                            child: Text(_time,//传入的时间值
                              style: TextStyle(
                                fontSize: 10,
                                color: Colors.black,
                              ),
                            )
                        ),

4、内容 Content 卡片，用Card组合实现 :

                    Card(
                        margin: EdgeInsets.fromLTRB(10, 0, 0, 5),//外边距
                        elevation: 8.0, //设置阴影
                        shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(15.0))),//卡片弧度
                        child: Row(
                          mainAxisSize: MainAxisSize.min,//类似Android里的warp，取内容最小
                          children: [
                            Container(
                              height: 30,
                              margin: EdgeInsets.fromLTRB(15, 5, 15, 5),
                              alignment: Alignment.center,//居中
                              child: Text(_content,//传入的内容
                                  style: TextStyle(//文本风格设置
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 15,
                                  )),
                            ),
                          ],
                        )
                    )

代码部分

item的Widget代码

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

class PlanWidget extends StatelessWidget {
  String _content;
  String _time;
  IconData _icon;
  VoidCallback onTap;

  PlanWidget(this._content, this._time, this._icon, {required this.onTap});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        child: Stack(
          children: [
            Padding(
                padding: EdgeInsets.fromLTRB(20, 0, 0, 0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Stack(
                      fit: StackFit.loose,
                      alignment: Alignment.bottomCenter,
                      children: [
                        Positioned(
                            left: 45,
                            child: Text(_time,//传入的时间值
                              style: TextStyle(
                                fontSize: 10,
                                color: Colors.black,
                              ),
                            )
                        ),

                        Container(
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: Colors.red[400],//400度的红色
                              borderRadius:
                                  BorderRadius.all(Radius.circular(4.0))),//4度圆弧
                          margin: EdgeInsets.only(bottom: 50),//向底部隔50 pixels
                          width: 4,//宽度
                        ),
                        Container(
                          width: 30,
                          height: 30,
                          alignment: Alignment.center,//居中
                          margin: EdgeInsets.all(10.0),
                          child: Icon(
                            _icon,//加载icon
                            color: Colors.white,
                          ),
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,//采用圆形
                            color: Colors.yellow,
                            gradient: LinearGradient(
                              colors: [Colors.red, Colors.yellow],//颜色从红到黄渐变
                            ),
                          ),
                        ),
                        SizedBox(width: 70),
                      ],

                    ),

                    Card(
                        margin: EdgeInsets.fromLTRB(10, 0, 0, 5),//外边距
                        elevation: 8.0, //设置阴影
                        shape: const RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(Radius.circular(15.0))),//卡片弧度
                        child: Row(
                          mainAxisSize: MainAxisSize.min,//类似Android里的warp，取内容最小
                          children: [
                            Container(
                              height: 30,
                              margin: EdgeInsets.fromLTRB(15, 5, 15, 5),
                              alignment: Alignment.center,//居中
                              child: Text(_content,//传入的内容
                                  style: TextStyle(//文本风格设置
                                    color: Colors.black,
                                    fontWeight: FontWeight.bold,
                                    fontSize: 15,
                                  )),
                            ),
                          ],
                        )
                    )
                  ],
                )),
          ],
        ));
  }
}

list的引入代码

这里我用_word作为内容数组进行传入，可根据实际需求传入日期，icon和content内容进行内容展示，

			ListView.builder(
                itemCount: _words.length,
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  //显示内容列表项
                  return PlanWidget(_words[index], "6.24", Icons.add, onTap: (){
                  });
                },
                // separatorBuilder: (BuildContext context, int index) {
                //   return ;
                // },

              )

总结

此为item自定义内容，flutter核心：万物皆是Widget。