如何在flutter中的单独文件中以单独的方法加载json数据？

Question

我有一个用于更改背景颜色的 json 文件：

# settings.json

{
    "view_background_color": "#f5f242",
}

在我的 main.dart 文件中，我有一个名为 initializeThemeData()Future 方法code> 加载文件 settings.json ，然后将 json 字符串放入变量 data 中。该方法返回应用的 ThemeData()。 ThemeData() 使用 data['view_background_color'] 作为 scaffoldBackgroundColor 的值。

# main.dart 
Future<ThemeData> initializeThemeData() async {
  String jsonData =
      await rootBundle.loadString('assets/config/client_settings.json');
  Map<String, dynamic> data = jsonDecode(jsonData);

  return ThemeData(
    scaffoldBackgroundColor:
        Color(convertor.getColor(data['view_background_color'])),
    
  );
}

在 ThemeData() 中，我还获取了 Convertor() 类，我用它来将十六进制颜色转换为十六进制。这是转换 data['view_background_color'] 的类：

# convertor.dart
class Convertor {
  int getColor(String hexColor) {
    return int.parse("0xFF" + hexColor.substring(1));
  }

}

我的问题是我是否还可以创建一个单独的方法来加载 json 文件并将其放置在单独的文件中，然后从main.dart？

然后我想放置一个像这样的变量： scaffoldBackgroundColor: Color(convertor.getColor(backGroundColor))

而不是： scaffoldBackgroundColor：颜色(convertor.getColor(data['view_background_color']))

Answer 1

我最初的想法是想知道为什么这些都需要来自 json 文件。

这并不是 Flutter 真正的做事方式。除非我在这里遗漏了一些东西，否则这些只是硬编码的值。因此，您有额外的代码来完成这项工作，没有任何额外的好处，并且实际上使应用程序做更多的工作来完成同样的事情。

您可以只拥有一个常量文件，这样就可以避免任何转换。

const viewBackgroundColor = Color(0xFFf5f242);

然后将其传递到您的 ThemeData 中并完成它。

scaffoldBackgroundColor: viewBackgroundColor,

或者您可以将其放入 Settings 类中。

class Settings {
 static const viewBackgroundColor = Color(0xFFf5f242);
}

然后它看起来像这样

scaffoldBackgroundColor: Settings.viewBackgroundColor,

编辑：

当你的设计师仍在工作时，你可以做这样的事情。

class SettingsConverter {
  static Future<Color> getColorFromJson(String key) async {
    String jsonData = await rootBundle.loadString('assets/config/client_settings.json');
    Map<String, dynamic> data = jsonDecode(jsonData);
    return Color(ColorConvertor.getColor(data[key]));
  }
}

class ColorConvertor {
  static int getColor(String hexColor) {
    return int.parse("0xFF" + hexColor.substring(1));
  }
}

那么你的 initializeThemeData 将如下所示。

Future<ThemeData> initializeThemeData() async {
  final bgColor =
      await SettingsConverter.getColorFromJson('view_background_color');

  return ThemeData(
    scaffoldBackgroundColor: bgColor,
  );
}