如何使小部件作業得更快-自定義json轉換小部件

我有一個串列，我想在其中顯示物件串列。每個物件都有一個 json 欄位，其中定義了“標簽”。每個都包含一個欄位名稱和一個值。來自包含在 json 中的欄位的值必須以漂亮的“瓷磚”形式顯示。當一個欄位被聚焦時，欄位名稱（工具提示）應該會出現。

我寫了我的小部件來為此轉換 json。作業正常，但我發現串列的性能隨著專案的數量（滾動和懸停在一個專案上）而大大降低在 10 時它仍然可以，但在 50 時則不是。當我評論“JsonWidget”并只使用文本小部件時，一切都很快。我想知道是否有一種方法可以以更優化的方式撰寫它。

她是完整的代碼：

import 'dart:convert';
import 'package:flutter/material.dart';

void main() {
  runApp(GenistryApp());
}

//My example object with json field
class MyObject {
  int id;
  String json =
      '{"year":1850,"1 name":"Zuzanna","names":"Stefania","surname":"Zab?ocka","sex":"W","city":"Warsaw","date":"1850.01.02","father":"Piotr","mothers_anme":"Józefa","mothers_surname":"Wojnicz","info":"Szlachetni"}';
  MyObject(this.id);
}

class GenistryApp extends StatelessWidget {
  const GenistryApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: MyTableWidget(),
        theme: ThemeData(
          primarySwatch: Colors.lightGreen,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ));
  }
}

class MyTableWidget extends StatefulWidget {
  const MyTableWidget({Key key}) : super(key: key);

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

class _MyTableWidgetState extends State<MyTableWidget> {
  MyDataTableSource _data = MyDataTableSource([]);

  List<MyObject> list = [];

  //Generating 50 same elements for testing
  getData() {
    for (int i = 0; i < 50; i  ) {
      list.add(MyObject(i));
    }
    _data = MyDataTableSource(list);
  }

  @override
  Widget build(BuildContext context) {
    getData();
    return Scaffold(
        backgroundColor: Colors.white.withOpacity(0.8),
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: PaginatedDataTable(
            source: _data,
            columns: [
              DataColumn(label: Container()),
              DataColumn(
                  label: ConstrainedBox(
                      constraints: BoxConstraints.expand(
                          width: MediaQuery.of(context).size.width))),
            ],
            columnSpacing: 50,
            horizontalMargin: 10,
            rowsPerPage: 50,
            showCheckboxColumn: false,
          ),
        ));
  }
}

class MyDataTableSource extends DataTableSource {
  List<MyObject> _data;
  MyDataTableSource(this._data);

  bool get isRowCountApproximate => false;
  int get rowCount => _data.length;
  int get selectedRowCount => 0;
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text("ID")),
      DataCell(
        JsonWidget(_data[index]
            .json), //  Here is my widget to convert json field - it slows all list
        // Text(_data[index].json), //  Here is simple json field for testing - it works fast
        onTap: () => {},
      ),
    ]);
  }
}

//Widget to convert json to nice looking "tags"
class JsonWidget extends StatelessWidget {
  String jdata;
  Map<String, dynamic> data;
  JsonWidget(String jdata) {
    this.jdata = jdata;
  }
  var containers = <Tooltip>[];
  @override
  Widget build(BuildContext context) {
    this.data = json.decode(this.jdata);
    data.entries.forEach((element) {
      containers.add(new Tooltip(
          message: element.key, //tag's fieldname
          textStyle: TextStyle(color: Colors.white),
          child: Container(
            margin: const EdgeInsets.all(3),
            padding: const EdgeInsets.all(4),
            child: Text(element.value.toString()), //tag's fieldvalue
            decoration: BoxDecoration(
                border: Border.all(color: Colors.blueAccent, width: 0.7),
                borderRadius: BorderRadius.all(Radius.circular(20))),
          )));
    });
    return Row(children: this.containers);
  }
}

uj5u.com熱心網友回復：

構建方法的設計方式應該是純粹的/沒有副作用。它應該只回傳一個小部件，而不是像在 JsonWidget 案例中那樣運行 for 回圈。撰寫此內容的更好方法是使用串列視圖構建器。

  class JsonWidget extends StatelessWidget {
  Map<String, dynamic> data;
  JsonWidget(Map<String, dynamic> data) {
    this.data = data;
  }
  var containers = <Tooltip>[];
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: data.entries.length,
        itemBuilder: (context, index) {
          return Tooltip(
              message: data.entries.toList()[index].key, //tag's fieldname
              textStyle: TextStyle(color: Colors.white),
              child: Container(
                margin: const EdgeInsets.all(3),
                padding: const EdgeInsets.all(4),
                child: Text(data.entries
                    .toList()[index]
                    .value
                    .toString()), //tag's fieldvalue
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.blueAccent, width: 0.7),
                    borderRadius: BorderRadius.all(Radius.circular(20))),
              ));
        });
  }
}

MyDataTableSoure 看起來像這樣

class MyDataTableSource extends DataTableSource {
  List<MyObject> _data;
  MyDataTableSource(this._data);

  bool get isRowCountApproximate => false;
  int get rowCount => _data.length;
  int get selectedRowCount => 0;
  DataRow getRow(int index) {
    return DataRow(cells: [
      DataCell(Text("ID")),
      DataCell(
        JsonWidget(json.decode(_data[index]
            .json)), //  Here is my widget to convert json field - it slows all list
        // Text(_data[index].json), //  Here is simple json field for testing - it works fast
        onTap: () => {},
      ),
    ]);
  }
}

標籤：扑 镖 网络

上一篇：影像未加載HTML

下一篇：分類樹工具和與網站的集成