先上图
难点 绘制时间轴与文字等高
正儿八经的方案计算每一个text的高度和 设置分割线的高度,方案3为取巧的可行方案
final text = 'Hello, world!';
final style = TextStyle(fontSize: 20);
final textSpan = TextSpan(text: text, style: style);
final textPainter = TextPainter(
text: textSpan,
textDirection: TextDirection.ltr,
);
textPainter.layout();
final height = textPainter.size.height;
1. 使用布局ListView>IntrinsicHeight>Row>ExpandableText
======== Exception caught by rendering library =====================================================
The following _CastError was thrown during performLayout():
Null check operator used on a null value
The relevant error-causing widget was:
ListView ListView:file:///D:/working/timelines/example/lib/main.dart:137:15
When the exception was thrown, this was the stack:
#0 RenderSliverEdgeInsetsPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:149:63)
#1 RenderSliverPadding.performLayout (package:flutter/src/rendering/sliver_padding.dart:371:11)
2.ListView设置分割线 貌似只有水平的生效 垂直无效
ListView.separated(
separatorBuilder: (BuildContext context, int index) => const VerticalDivider(),
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
);
3.给item加边框绘制分割线
class ExamplePage extends StatelessWidget {
List itemList = ['1', '2', '3'];
@override
Widget build(BuildContext context) {
return TimelineTheme(
data: TimelineThemeData(
indicatorTheme: IndicatorThemeData(size: 15.0),
),
child: Scaffold(
appBar: AppBar(
title: Text('Timelines Example'),
),
body: ListView(
padding: EdgeInsets.all(20.0),
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
width: 6.5,
height: 6.5,
margin: EdgeInsets.only(top: 3.5),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Color(0xFF999999),
width: 1,
)),
),
Padding(
padding: EdgeInsets.only(left: 10),
child: Text("20230703",
style: TextStyle(
color: Color(0xFF999999), fontSize: 12)),
)
],
),
Container(
padding: EdgeInsets.symmetric(horizontal: 6),
margin: EdgeInsets.only(left: 3),
decoration: BoxDecoration(
border: Border(
left: BorderSide(width: 1, color: Color(0xFFEEEEEE)),
)),
child: TimeLinesItem3()),
],
),
],
),
),
);
}
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'expandable_text.dart';
//
class TimeLinesItem3 extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return LinesItemState();
}
}
class LinesItemState extends State<TimeLinesItem3> {
@override
void initState() {
// TODO: implement initState
super.initState();
}
@override
Widget build(BuildContext context) {
return
Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 10),
child: Text("AAAA Title",
maxLines: 2,
style: TextStyle(
color: Color(0xFF333333),
fontSize: 16,
height: 1.5,
fontWeight: FontWeight.bold))),
ExpandableText(
"AAAA Content在Flutter中,您可以使用Column组件来垂直排列子控件。默认情况下,子控件是居中对齐的。如果您想要左对齐,可以使用crossAxisAlignment属性。例如",
expandText: 'aaaa',
maxLines: 2,
expandOnTextTap: true,
collapseOnTextTap: true,
),
Container(
margin: EdgeInsets.only(top: 14, bottom: 6),
padding: EdgeInsets.all(6),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Color(0x14FF3737), Color(0x05E93030)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text('普利特',
style: TextStyle(color: Color(0xFF333333), fontSize: 12)),
Padding(padding: EdgeInsets.only(right: 10)),
Text('4.08%',
style: TextStyle(color: Color(0xFFE93030), fontSize: 12)),
],
),
),
],
);
}
}