专栏首页技术人生用flutter很简单的实现一个时光轴样式【flutter20个实例之五】

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

一、老套路,先看样式

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

二、讲解

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,
            )),
      ],
    );
  }
}

持续更新中......

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用flutter给图片加个好看的遮罩层【flutter20个实例之六】

    左起图一是我业务中的样式,左起图二、三是下方源码展示样式(复制可直接运行,无额外组件引入)

    sinnoo
  • 谈谈flutter中Checkbox复选框的全选与删除【flutter20个实例之三】

    左侧三张图片是我的实际开发中业务界面,用作展示而已,具体源码效果是右边侧的三张图片。

    sinnoo
  • flutter 生成圆形/圆角图片【ClipRRect组件等】

    使用的DecorationImage,相当于把图片当做一个背景,这里需要注意的就是Container的child的尺寸问题,就算不放内容,也需要设置一个带尺寸的...

    sinnoo
  • vue父组件调用子组件方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • VUE 组件通信总结

    https://cn.vuejs.org/v2/guide/state-management.html

    菜的黑人牙膏
  • python爬虫入门(六) Scrapy框架之原理介绍

    Scrapy框架 Scrapy简介 Scrapy是用纯Python实现一个为了爬取网站数据、提取结构性数据而编写的应用框架,用途非常广泛。 框架的力量,...

    zhang_derek
  • UNIX 高级环境编程 实验一 同步与异步write的效率比较

    ​ 计算 write 耗费的时间,来比较同步写和异步写的性能差异。显示的时间应当尽量接近write操作过程所花的时间。不要将从磁盘读文件的时间计入显示结果中。

    glm233
  • Mycat基本使用教程

    路径在: /usr/local/mycat/conf/rule.xml function必须在tableRule的下面, 否则会报错找不到

    aox.lei
  • 使用 DBMS_REPAIR 修复坏块

           对于Oracle数据块物理损坏的情形,在我们有备份的情况下可以直接使用备份来恢复。对于通过备份恢复,Oracel为我们提供了很多种方式,冷备,基于...

    Leshami
  • Intent详细介绍及使用实例

    一个Android程序通常有多个组件构成。如果要从一个Activity切换到另一个,必须用Intent来激活。实际上,Activity,Service和Broa...

    提莫队长

扫码关注云+社区

领取腾讯云代金券