如何在另一个小部件中管理小部件状态

Question

我最近开始使用 Flutter 和 Flutter Web。从另一个文件（tables_display.dart）更改一个文件（content_table.dart）中的小部件状态的最佳做法是什么

tables_display.dart：

import 'package:portal/components/content_table.dart';

class TableDisplay extends StatefulWidget {
  @override
  _TableDisplayState createState() => _TableDisplayState();
}

class _TableDisplayState extends State<TableDisplay> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        padding: EdgeInsets.only(top: 8.0),
        width: MediaQuery.of(context).size.width,
        height: 700,
        decoration: BoxDecoration(),
        child: DefaultTabController(
          length: 3,
          initialIndex: 0,
          child: Column(
            children: [
              Align(
                alignment: Alignment.centerLeft,
                child: TabBar(
                  labelStyle:
                      TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
                  isScrollable: true,
                  indicatorSize: TabBarIndicatorSize
                      .label, //make the indicator the same size as the label
                  labelPadding: EdgeInsets.fromLTRB(5, 0, 5, 0),
                  labelColor: FlutterFlowTheme.primaryColor,
                  unselectedLabelColor: Colors.black54,
                  indicatorColor: FlutterFlowTheme
                      .primaryColor, //adds color to the indicator
                  tabs: [
                    Container(
                      // decoration: BoxDecoration(
                      //   borderRadius: BorderRadius.circular(0),
                      //   border: Border(
                      //       top: BorderSide(width: 1, color: Colors.red),
                      //       left: BorderSide(width: 1, color: Colors.red),
                      //       right: BorderSide(width: 1, color: Colors.red)),
                      //   //border: Border.all(color: Colors.redAccent, width: 1)
                      // ),
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(25, 5, 25, 0),
                        child: Tab(
                          text: 'Easy',
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(25, 5, 25, 0),
                      child: Tab(
                        text: 'Medium',
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(25, 5, 25, 0),
                      child: Tab(
                        text: 'Hard',
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                  child: Container(
                // decoration: BoxDecoration(
                //     border: Border(
                //   top: BorderSide(width: 1, color: Colors.red),
                // )),

                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.only(top: 0, bottom: 20),
                  child: TabBarView(
                    children: [
                      ContentTable(),
                      ContentTable(),
                      ContentTable(),
                    ],
                  ),
                ),
              )),
            ],
          ),
        ),
      ),
    );
  }
}

在上面的代码中，我创建了一个由 3 个选项卡组成的 DefaultTabController； Easy、Medium 和 Hard，每个选项卡都可以访问 content_table.dart 文件中的 ContentTable() 小部件 我希望当单击 SPECIFIC 选项卡时，它会使用指定的数据重建小部件树中的 ContentTable() 小部件。你会怎么做呢？

content_table.dart：

import 'package:flutter/material.dart';

class ContentTable extends StatefulWidget {
  @override
  _ContentState createState() => _ContentState();
}

class _ContentState extends State<ContentTable> {
  @override
  Widget build(BuildContext context) {
    return Container(
      //decoration: BoxDecoration(border: Border.all(color: Colors.grey[100])),
      child: Padding(
        padding: const EdgeInsets.all(0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            DataTable(
                showCheckboxColumn: true,
                decoration: BoxDecoration(
                  border: Border(
                    top: BorderSide(color: Colors.grey[100], width: 1),
                    bottom: BorderSide(color: Colors.grey[100], width: 1),
                  ),
                ),
                headingRowColor: MaterialStateColor.resolveWith(
                    (states) => Colors.grey.shade50),
                columns: [
                  DataColumn(
                    label: Text("ID", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Question", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Opt. 1", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Opt. 2", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Opt. 3", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Opt. 4", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Explanation", style: TextStyle(fontSize: 11)),
                  ),
                  DataColumn(
                    label: Text("Image", style: TextStyle(fontSize: 11)),
                  ),
                ],
                rows: [])
          ],
        ),
      ),
    );
  }
}

Answer 1

对于这个特定的问题，解决方案非常简单。在小部件之间传递数据与它们在哪些文件中定义无关，只与它们在您的应用程序中实际使用的位置有关。看起来您正在使用 ContentTable 作为 TableDisplay 的子小部件，因此您可以毫无问题地将信息传递给它。只需在 content_table.dart 中定义一个参数，并在您在 tables_display.dart 中调用 ContentTable 时为该参数提供一个值，例如：

content_table.dart

class ContentTable extends StatefulWidget {
  final bool hard;

  ContentTable(
    {this.hard = false}
  );

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

class _ContentState extends State<ContentTable> {
  //...if(widget.hard) {...

tables_display.dart

//...
TabBarView(
  children: [
    ContentTable(hard: true), //hard will be true
    ContentTable(), //hard will remain false
    ContentTable(hard: true), //hard will be true
  ],
),
//...

如果您想在应用程序的完全不同部分使用的小部件之间传递数据，请使用Provider