我想用 Provider 動態添加小部件

Question

我正在使用 Provider package，我想動態添加要顯示的小部件。 我編寫了如下代碼，但小部件沒有顯示任何內容。 沒有發生錯誤。

// Contains widget and related data
class WidgetData {
    Widget? child;  // want to show this
    String data1;
    int data2;
}    

class Model exteds ChangeNotifier {
    List<WidgetData> widget;   // I want to show all of this widget.child
    
    void addWidget(Widget child) {
        print("Called1") // "Called1"
        var w = widgets.toList();
        w.add(child);
        widgetData = w;
        notifyListeners();
    }
}

class Example extends StatelessWidget {
    @override
    build (BuildContext context) {
        return Scaffold(
            body: Column(children: [
                 for(var i in context.watch<Model>().widget) i.child!;
        ]);
    }
}

當按下按鈕時， context.read<Model>().addWidget(Text("test"))將被調用。 但仍然不顯示小部件。

 // inside of build(BuildContext context)
 FloatingActionButton(
   onPressed: () => context.read<Model>().addWidget(Text("test")),
   child: Icon(Icons.abc)
 ); 

當然，我在main中構建了提供者樹。

void main() {
  runApp(MultiProvider(
     ChangeNotifierProvider<Model>(
       create: (_) => Model()),
  ));

  child: 
  ....
}

Answer 1

不鼓勵在 Flutter 中的構建 function 之外創建和存儲小部件。 您的提供者不應該提供小部件，而是提供構建小部件所需的數據，然后您在build方法中構建小部件。

例如，如果你有一個字符串列表而不是小部件列表，那么在build方法中，你可以輕松地將該字符串列表轉換為Text小部件，如下所示： Column(children: stringlist.map((e) => Text(e)).toList())