实施基于时间轴的可禁用ListTile小部件

时间:2020-06-05 17:51:02

标签: listview flutter flutter-layout

注意:在开始讨论问题之前,我想让所有人都 问题,这是我的最终目标:

  • 开发一个反应式ListTile小部件,该部件通过更改后端的当前状态来响应来自后端的事件。

我将再提一个问题。现在,这是我这个问题的目标


目标:设计一个statefull小部件,它具有多个自定义组件,例如 Circle 与时间轴相关的小部件 并将其与其他组件一起放在Dismissable Listile中,如以下屏幕截图所示

Final Widget Design

到目前为止,我已经用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'),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    },
  ),

这是该代码产生的设计

The Design Implementation so far

尝试的解决方案: 我考虑过使用时间轴包,但是它显示的是垂直时间轴,而不是水平的时间轴。

问题:我需要实现时间轴(每个ListTile中的圆圈)

1 个答案:

答案 0 :(得分:2)

enter image description here

我已根据需要向每个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 }
相关问题