如何將資料向下傳遞到小部件樹？

我已閱讀并理解此處發布的類似問題，但無法將其應用于我的用例。我是 Flutter 的新手，正在創建一個應用程式，使用 Ryan Heise 的 audio_service 插件從給定的 URL 流式傳輸音頻。使用這個插件，我在啟動我的應用程式時立即實體化了一個 audioHandler：

late AudioHandler audioHandler;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final session = await AudioSession.instance;
  await session.configure(const AudioSessionConfiguration.music());
  audioHandler = await AudioService.init(
    builder: () => AudioPlayerHandler(),
    config: const AudioServiceConfig(
      androidNotificationChannelId: 'com.ryanheise.myapp.channel.audio',
      androidNotificationChannelName: 'Channel Name',
      androidNotificationOngoing: true,
    ),
  );
  runApp(const MyApp());
}

初始化此 audioHandler 后，我想在子小部件中使用它。下面的示例演示了一個這樣的子小部件：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "Koradi Radio",
        theme: ThemeData(
          brightness: Brightness.light,
          scaffoldBackgroundColor: Colors.white70,
        ),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        themeMode: ThemeMode.system,
        home: const EnglishHome());
  }
}

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

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


class _EnglishHomeState extends State<EnglishHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('English Radio'),
        backgroundColor: Colors.transparent,
      ),
      body: ... 
    }
}

請注意，MyApp 目前只路由到 EnglishHome()，但我計劃添加其他語言，而不是將 MyApp 路由到用戶可以選擇其語言的頁面。如何將 audioHandler 從 Main() 傳遞給所有后代小部件？（EnglishHome、EspHome、FrenchHome 等？）根據我所閱讀的內容，我要么修改子小部件的 Key 引數，要么修改它們的 BuildContext？

uj5u.com熱心網友回復：

您可以使用provider包，您需要做的就是使用Provider.value，然后Provider.of(context)在您的EnglishHome等FrenchHome類中使用。

late AudioHandler audioHandler;

Future<void> main() async {
  audioHandler = await AudioService.init(...);
  runApp(MyApp(audioHandler));
}

class MyApp extends StatelessWidget {
  final AudioHandler audioHandler;
  const MyApp(this.audioHandler, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Provider.value(
      value: audioHandler, // Providing the data above MaterialApp
      child: MaterialApp(
        home: EnglishHome(),
      ),
    );
  }
}

class EnglishHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Accessing the data. 
    final audioHandler = Provider.of<AudioHandler>(context);
    return Container();
  }
}

uj5u.com熱心網友回復：

您可以使用提供程式插件來執行此操作。

uj5u.com熱心網友回復：

這里的其他答案也是有效的解決方案，但我能夠做的是向 EnglishHome 添加一個 audioHandler 引數：

class EnglishHome extends StatefulWidget {
  var audioHandler;

  EnglishHome({Key? key, this.audioHandler}) : super(key: key);

  @override
  _EnglishHomeState createState() => _EnglishHomeState();

然后在從我的 main.dart 檔案呼叫 Widget 時傳入 audioHandler：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: "Radio",
        theme: ThemeData(
          brightness: Brightness.light,
          scaffoldBackgroundColor: Colors.blue[100],
        ),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
        ),
        themeMode: ThemeMode.system,
        home: EnglishHome(
          audioHandler: audioHandler,
        ));
  }
}

標籤：

上一篇：FluttersetState不更新特定的小部件

下一篇：當我點擊我的抽屜選單按鈕時，我的抽屜瓷磚的onTapped被執行