前言
學習flutter差不多用了一個月的時間没佑，剛好最近公司啟動了一個新項目百姓，本人決定使用flutter開發(fā)楣颠，兩個星期寫UI兩個星期寫接口，現(xiàn)在已經(jīng)進入測試階段夏志，總結一下項目中值得記錄的部分
UI效果圖
效果圖.png
flutter實現(xiàn)效果圖
image.png
其實也就是中間那部分該如何實現(xiàn)的問題乃坤？
具體實現(xiàn)
image.png
- 分析
- 每個item 對應為row 一行
- 這個 row 分為左右結構，如圖藍色部分
為了簡化代買沟蔑，我把項目中的代碼拆出來湿诊，寫了demo，下面的代碼可以直接復制到demo中可直接運行
代碼實現(xiàn)
import 'dashed_line_widget.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
List<String>dataList = [
'這些年瘦材， 習近平主席視察部隊時接見最多的是基層一線官兵厅须， 從北疆哨所到南國林海， 從戈壁大漠到海防一線宇色， 習主席每次走進基層總是與士兵親切交談九杂， 他很關心戰(zhàn)士們的生活颁湖， 拉家常宣蠕、 問冷暖。 對官兵甥捺， 習主席有一種天然的親近感抢蚀。 他年輕時在軍隊工作過一段時間， 在擔任地方領導期間十分關心支持國防和軍隊建設镰禾， 曾深情賦詩“ 難得舉城作一慶皿曲， 愛我人民愛我軍',
'習近平主席多次強調(diào)：“ 實現(xiàn)強軍目標， 基礎在基層吴侦， 活力也在基層屋休。” 基層是部隊建設和戰(zhàn)斗力的基礎备韧。 黨的十八大以來劫樟， 習主席數(shù)十次深入基層部隊視察調(diào)研， 踏冰雪、 冒嚴寒叠艳、 到一線奶陈， 基層戰(zhàn)士始終是習主席心中最深的牽掛。',
'潛客狀態(tài)變化'
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body:_grayCenter(context),
);
}
//灰色部分
Widget _grayCenter(BuildContext context){
List<Widget> widgets = [];
for(String followupList in dataList){
Widget widget = _getRow(followupList);
widgets.add(widget);
}
print(widgets);
return Container(
width: double.infinity,
decoration: BoxDecoration(
color: Color(0xFFF7F9FA),
borderRadius: BorderRadius.circular(3),
),
padding: EdgeInsets.only(left: 0,right: 15,top: 15,bottom: 15),
child: Column(
children:widgets,
),
);
}
Widget _getRow(String followupListItem){
String timestr = DateTime.now().toString().substring(0,10);
Widget firstRow;
Widget contentWidget = SizedBox();
//跟進記錄
contentWidget = Text(
followupListItem??"--",
style: TextStyle(
fontSize: 12,
),
softWrap: true,
);
firstRow = Row(
children: <Widget>[
Text(
timestr,
style: TextStyle(
fontSize: 12.0,
)
)
],
);
Widget pointWidget;
double topSpace = 0;
topSpace = 3;
pointWidget = ClipOval(
child: Container(
width: 7,
height: 7,
color: Colors.grey,
),
);
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
//灰色右
Expanded(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 37),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: topSpace==0?4:0,
),
firstRow,
SizedBox(
height: 12.0,
),
contentWidget,
SizedBox(
height: 12.0,
),
],
),
),
Positioned(
left: 0,
width: 37,
bottom: 0,
top: topSpace,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
pointWidget,
Expanded(
child: Container(
width: 27,
child: MySeparatorVertical(
color: Colors.grey,
),
),
)
],
),
),
)
],
),
),
],
);
}
}
dashed_line_widget.dart
import 'package:flutter/material.dart';
class MySeparatorVertical extends StatelessWidget {
final Color color;
const MySeparatorVertical({this.color = Colors.black});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final height = constraints.constrainHeight();
final dashWidth = 4.0;
final dashCount = (height / (2 * dashWidth)).floor();
print("dashCount $dashCount height $height");
return Flex(
children: List.generate(dashCount, (_) {
return SizedBox(
width: 1,
height: dashWidth,
child: DecoratedBox(
decoration: BoxDecoration(color: color),
),
);
}),
mainAxisAlignment: MainAxisAlignment.spaceBetween,
direction: Axis.vertical,
);
},
);
}
}
運行出來的效果
image.png
總結
- 其實就是利用了stack 與 position 的特性自動獲取右側文字的大小
- LayoutBuilder 獲取constraints 大小
