如何提取设置状态的小部件

时间:2020-05-08 10:14:35

标签: flutter dart

我有一个DataTable,我想提取小部件,因为我在整个应用程序中都使用了它。 DataTable具有排序列名称的功能。

我能够完美地完成所有工作,但是我无法理解如何提取小部件并同时保持功能性。我正在使用回调方法,但无法解决。

我的代码

 Column(
    crossAxisAlignment: CrossAxisAlignment.center,
                                         // this int and bool I need to pass, but it is onlyh in setState() 
    children: <Widget>[GetTable(true, 0, quantityPressed(1, true), [], getListItemsAccount())]
  )

获取表类

import 'package:flutter/material.dart';

class GetTable extends StatefulWidget {
  int indexCol;
  bool as;

  final void Function(int, bool) callback;
  final List<String> columns;
  final List<DataRow> rows;

  GetTable(this.as, this.indexCol, this.callback, this.columns, this.rows);

  @override
  _GetTableState createState() => _GetTableState();
}

class _GetTableState extends State<GetTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
      columnSpacing: 30,
      horizontalMargin: 0,
      sortColumnIndex: widget.indexCol,
      sortAscending: widget.as,
      columns: createColumns(),
      rows: widget.rows,
    );
  }

  List<DataColumn> createColumns() {
    var list = List<DataColumn>();
    for (var i = 0; i < widget.columns.length; i++) {
      list.add(DataColumn(
        numeric: true,
        label: Text(
          widget.columns[i],
          style: TextStyle(fontFamily: 'Comfortaa'),
        ),
        onSort: (index, bool) {
          widget.callback(index, bool);
        },
      ));
    }
    return list;
  }
}

不提取屏幕内部小部件的完整代码为:

  var colTable = 0;


var asTable = true;
  List<ItemShopModel> items;
  var total = 0.0;
  var currency = getKenya();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CALCULATOR'),
      ),
      body: ListView(
        shrinkWrap: true,
        children: <Widget>[
          Center(
            child: Form(
              key: _formKey,
              child: Padding(
                padding: EdgeInsets.all(16.0),
                // Extract this Widget
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    DataTable(
                      columnSpacing: 30,
                      horizontalMargin: 0,
                      sortColumnIndex: colTable,
                      sortAscending: asTable,
                      columns: [
                        DataColumn(
                          numeric: true,
                          label: Text(
                            'Quantity',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) =>
                                    a.getQuantity().compareTo(b.getQuantity()));
                              } else {
                                items.sort((a, b) =>
                                    b.getQuantity().compareTo(a.getQuantity()));
                              }
                            });
                          },
                        ),
                        DataColumn(
                          label: Text(
                            'Item',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) => a
                                    .getItem()
                                    .getName()
                                    .compareTo(b.getItem().getName()));
                              } else {
                                items.sort((a, b) => b
                                    .getItem()
                                    .getName()
                                    .compareTo(a.getItem().getName()));
                              }
                            });
                          },
                        ),
                        DataColumn(
                          label: Text(
                            'Total price',
                            style: TextStyle(fontFamily: 'Comfortaa'),
                          ),
                          onSort: (index, bool) {
                            setState(() {
                              colTable = index;
                              asTable = bool;
                              if (bool) {
                                items.sort((a, b) => a
                                    .getFinalPrice()
                                    .compareTo(b.getFinalPrice()));
                              } else {
                                items.sort((a, b) => b
                                    .getItem()
                                    .getName()
                                    .compareTo(a.getItem().getName()));
                              }
                            });
                          },
                        ),
                      ],
                      rows: getListItemsAccount(),
                    ),
                    SizedBox(
                      height: 30,
                    ),
                    Container(
                      height: 76.00,
                      width: 252.00,
                      decoration: BoxDecoration(
                        color: Color(0xff48a999),
                        border: Border.all(
                          width: 3.00,
                          color: Color(0xff00796b),
                        ),
                        borderRadius: BorderRadius.circular(21.00),
                      ),
                      child: Center(
                        child: Text(
                          total.toString(),
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontFamily: "Indie Flower",
                            fontSize: 54,
                            color: Color(0xffffffff),
                          ),
                        ),
                      ),
                    ),
                    getChange(),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

如何有效地提取小部件?

0 个答案:

没有答案