将数据从父级传递到Flutter中的树小部件

时间:2020-04-21 16:31:02

标签: flutter parameters widget

我有这样的树形小部件 enter image description here

实际上,我在构造函数小部件中将数据从history_screen传递到history_item,再从history_item传递到line_graph,却遇到了麻烦:

在history_screen中,我的streamBuilder是这样的:

child: StreamBuilder(
  stream: dbRef.child('info_tekax/demo').limitToLast(10).onValue,
  builder: (context, snapshot) {
    if(snapshot.hasData && !snapshot.hasError){
      Map data = snapshot.data.snapshot.value;
      List keys = [];
      data.forEach( (index, data) => keys.add(index) );

      return ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          if(keys[index] != 'configs' && keys[index] != 'sensores')
            return HistoryItem(data: data, index: index, nameKey: keys[index],  bottom: 10);
          else
            return SizedBox(height: 0);
        } 
      );
    }else{
      return Container(
        child: Center(
          child: CircularProgressIndicator(),
        ),
      );
    }
  }
),

我想传递给我的子级小部件(history_item),只有子级才被绘制,如您所见,实际上我传递了所有来自StreamBuilder return HistoryItem(data: data, ...); 我希望只传递项目,例如return HistoryItem(data: data[index], ...);

问题是,当我这样做时,在我的孩子小部件中,我总是会为空。

另一方面,这是我的history_item

class HistoryItem extends StatefulWidget {
  Map data;
  int index;
  String nameKey;
  double bottom = 10;
  String title = '';

  HistoryItem({ Key key, @required this.data, @required this.index, @required this.nameKey, @required this.bottom });

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

class _HistoryItemState extends State<HistoryItem> {

  @override
  Widget build(BuildContext context) {
    var entry = widget.nameKey.split('_');

    return Column(
      children: <Widget>[
        Container(
          padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
          width: double.infinity,
          decoration: BoxDecoration(
            color: Color(0xFF343951),
            borderRadius: BorderRadius.circular(10)
          ),
          child: Theme(
            data: ThemeData(
              unselectedWidgetColor: Color(0xFF74A93A),
              accentColor: Color(0xFFF9C100),
            ),
            child: ExpansionTile(
              title: CustomText( title: entry[1], fontColor: Color(0xFF71798C), fontSize: 18 ),
              subtitle: CustomText( title: entry[0], fontColor: Colors.white70, fontSize: 12 ),
              backgroundColor: Color(0xFF343951),
              initiallyExpanded: false,
              children: <Widget>[
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
                  width: double.infinity,
                  height: 300,
                  child: SafeArea(
                      child: PageView(
                        children: <Widget>[
                          Container( 
                            child: ListView(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.symmetric( horizontal: 0, vertical: 0),
                                  child: LineGraph(data: widget.data, index: widget.index),
                                ),
                              ],
                            ),
                          )
                        ],
                      )
                    ),
                )
              ],
            ),
          )
        ),
        SizedBox(height: widget.bottom,)
      ],
    );
  }
}

实际上工作正常,我的问题是当我将数据从此小部件传递到line_graph

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:tekax/widgets/custom_text.dart';

class LineGraph extends StatefulWidget {
  Map data;
  int index;

  LineGraph({ Key key, @required this.data, @required this.index });
  @override
  _LineGraphState createState() => _LineGraphState();
}

class _LineGraphState extends State<LineGraph> {

  _prepareData(){
    print("Data receiving ${widget.data[widget.index]}");
  }

  @override
  Widget build(BuildContext context) {  

    _prepareData();

    return ...
  }
}

问题二: _prepareData始终接收空值,我尝试了不同的方法而没有得到预期的结果u

您有解决我问题的想法吗?这是我的第一个应用程序,对不起

0 个答案:

没有答案