注意:在开始讨论问题之前,我想让所有人都 问题,这是我的最终目标:
ListTile
小部件,该部件通过更改后端的当前状态来响应来自后端的事件。 我将再提一个问题。现在,这是我这个问题的目标
目标:设计一个statefull
小部件,它具有多个自定义组件,例如 Circle 和与时间轴相关的小部件
并将其与其他组件一起放在Dismissable Listile
中,如以下屏幕截图所示
到目前为止,我已经用ListView
实现了Dismissable ListTile
屏幕,该屏幕包含先前设计中显示的Text
小部件。
这是我目前拥有的代码:
ListView.builder(
itemCount: _items.length,
itemBuilder: (context, index) {
final String item = _items[index];
return Dismissible(
direction: DismissDirection.startToEnd,
key: Key(item),
onDismissed: (DismissDirection dir) {
setState(() => this._items.removeAt(index));
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(dir == DismissDirection.startToEnd
? '$item removed.'
: '$item liked.'),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
setState(() => this._items.insert(index, item));
},
),
),
);
},
background: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FaIcon(
FontAwesomeIcons.times,
color: kWhite,
),
SizedBox(
height: 10,
),
Text(
'Cancel Order',
style: TextStyle(color: kWhite),
)
],
),
alignment: Alignment.centerLeft,
),
child: ListTile(
//CustomeTimeLineWidget goes here innstead of the container
title: Container(
child: Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Order No: 002345',
),
Text('items no: 12'),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Order Total: 20000',
),
Text('17/04/2020'),
],
),
],
),
),
),
);
},
),
这是该代码产生的设计
尝试的解决方案: 我考虑过使用时间轴包,但是它显示的是垂直时间轴,而不是水平的时间轴。
问题:我需要实现时间轴(每个ListTile
中的圆圈)
答案 0 :(得分:2)
我已根据需要向每个ListTile添加了圈子
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
const kWhite = Colors.white;
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _items = <Order>[
Order(
id: 'id-1',
date: DateTime.now(),
number: 12,
intemNo: 20,
orderTotal: 20000,
status: OrderStatus.inProgress,
),
Order(
id: 'id-2',
date: DateTime.now().subtract(Duration(days: 10)),
number: 10,
intemNo: 2,
orderTotal: 5000,
status: OrderStatus.delivered,
),
];
DateFormat dateFormate = DateFormat.yMd();
@override
Widget build(BuildContext context) {
return ListView.separated(
separatorBuilder: (context, index) => Divider(
indent: 10.0,
endIndent: 10.0,
color: Colors.black,
),
itemCount: _items.length,
itemBuilder: (context, index) {
var item = _items[index];
return Dismissible(
direction: DismissDirection.startToEnd,
key: Key(item.id),
onDismissed: (dir) {
setState(() => _items.removeAt(index));
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text(dir == DismissDirection.startToEnd
? '$item removed.'
: '$item liked.'),
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
setState(() => _items.insert(index, item));
},
),
),
);
},
background: Container(
color: Colors.red,
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FaIcon(
FontAwesomeIcons.times,
color: kWhite,
),
SizedBox(
height: 10,
),
Text(
'Cancel \n Order',
style: TextStyle(color: kWhite),
)
],
),
alignment: Alignment.centerLeft,
),
child: ListTile(
title: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Order No: ${item.number}',
),
Text('items no: ${item.intemNo}'),
],
),
SizedBox(
height: 20,
),
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Order Total: ${item.orderTotal}',
),
Text(dateFormate.format(item.date)),
],
),
SizedBox(
height: 20,
),
StatusBar(
status: item.status,
)
],
),
),
),
);
},
);
}
}
class StatusBar extends StatelessWidget {
const StatusBar({Key key, this.status}) : super(key: key);
final OrderStatus status;
final List<String> titles = const [
'waiting',
'in progress',
'delivering',
'delivered'
];
@override
Widget build(BuildContext context) {
var checkedCount = _getCheckedCount(status);
var elements = List<bool>.generate(4, (i) => i < checkedCount);
return Column(
children: <Widget>[
Stack(
children: [
Positioned(
top: 25,
left: 10,
right: 10,
child: Container(
height: 4,
color: Colors.black38,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: elements
.asMap()
.map((index, isChecked) => MapEntry(
index,
Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.deepOrange,
),
alignment: Alignment.center,
width: 50,
height: 50,
child: isChecked
? FaIcon(
FontAwesomeIcons.check,
color: kWhite,
)
: null,
),
Text(titles[index])
],
),
))
.values
.toList(),
),
],
),
],
);
}
_getCheckedCount(OrderStatus status) {
switch (status) {
case OrderStatus.waiting:
return 1;
case OrderStatus.inProgress:
return 2;
case OrderStatus.deliviring:
return 3;
case OrderStatus.delivered:
return 4;
}
}
}
class Order {
final String id;
final int number;
final int intemNo;
final int orderTotal;
final DateTime date;
final OrderStatus status;
Order({
@required this.id,
@required this.number,
@required this.intemNo,
@required this.orderTotal,
@required this.date,
@required this.status,
});
}
enum OrderStatus { waiting, inProgress, deliviring, delivered }