0

为了在 Flutter 中创建响应式应用程序，我使用size_configs.dart文件来处理不同屏幕中代码的响应性。SizeConfigs().init(context);我在根小部件下方注入MyApp以使应用程序响应。init 方法采用上下文来缩放宽度、高度和字体大小。我还创建了函数，以便我可以放置从 Figma 设计中获得的确切字体值，而不是像 Sizer 包中那样的百分比。

getFont()、getHeight()、getWidth() 函数采用双精度并根据屏幕为文本创建响应大小。

size_configs.dart

import 'package:flutter/material.dart';

class SizeConfigs {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double defaultSize;
  static Orientation orientation;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    orientation = _mediaQueryData.orientation;
    // On iPhone 11 the defaultSize = 10 almost
    // So if the screen size increase or decrease then our defaultSize also vary
    defaultSize = orientation == Orientation.landscape
        ? screenHeight * 0.024
        : screenWidth * 0.024;
  }
}

double getFont(double size) {
  double defaultsSize = SizeConfigs.defaultSize * size;
  return (defaultsSize / 10);
}

// Get the proportionate height as per screen size
double getHeight(double inputHeight) {
  double screenHeight = SizeConfigs.screenHeight;
  // 812 is the layout height that designer use
  return (inputHeight / 812.0) * screenHeight;
}

// Get the proportionate width as per screen size
double getWidth(double inputWidth) {
  double screenWidth = SizeConfigs.screenWidth;
  // 375 is the layout width that Figma provides
  return (inputWidth / 375.0) * screenWidth;
}

我还有一个app_theme.dart文件，用于存储我在应用程序中使用的 ThemeData。

app_theme.dart

class AppTheme {
  //Light Theme Colors
  static Color lightBackgroundColor = const Color(0xffFFFFFF);
  static Color lightPrimaryColor = const Color(0xffF5E8EA);
  static Color lightSecondaryColor = const Color(0xff192533);
  static Color iconColor = const Color(0xffEEF0EB);

  ///Light Theme configuration
  static final lightTheme = ThemeData(
    textTheme: lightTextTheme,
    brightness: Brightness.light,
    backgroundColor: lightBackgroundColor,
    primaryColorLight: lightPrimaryColor,
    accentColor: lightSecondaryColor,
    selectedRowColor: tertiaryColor,
    unselectedWidgetColor: iconColor,
    toggleButtonsTheme:
        ToggleButtonsThemeData(color: tertiaryColor, disabledColor: iconColor),
    //buttonTheme: ButtonThemeData(buttonColor: tertiaryColor),
    toggleableActiveColor: tertiaryColor,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  );
  ///Light TextTheme configuration
  static final TextTheme lightTextTheme = TextTheme(
    headline4: _mainTitle,
    headline5: _title,
    subtitle1: _subtitle,
    bodyText1: _body,
    bodyText2: _detail,
  );
  /// Main Title
  static final TextStyle _mainTitle = TextStyle(
    fontFamily: "RedHatDisplay-Black",
    fontSize: 36,
  );

  /// Title
  static final TextStyle _title = TextStyle(
    fontFamily: "RedHatDisplay-Bold",
    fontSize: 28,
  );

  /// Subtitle
  static final TextStyle _subtitle = TextStyle(
    fontFamily: "RedHatDisplay-Medium",
    fontSize: 18,
  );

  /// Body
  static final TextStyle _body = TextStyle(
    fontFamily: "RedHatDisplay-Regular",
    fontSize: 16,
  );

  /// Detail
  static final TextStyle _detail = TextStyle(
    fontFamily: "RedHatDisplay-Regular",
    fontSize: 14,
  );
}

问题就在这里。getFont()ThemeData 没有 BuildContext，因此MediaQuery在其中不起作用，因此我无法fontSize在TextStyle.

我所做的是使用该copyWith方法并使用该函数覆盖 fontSize 属性。

     Text(
            'HomeScreen',
            style: Theme.of(context).textTheme.headline4.copyWith(fontSize: getFont(18)),
          ),

我只想Theme.of(context).headline4在我需要的地方使用它们，它的字体应该作为响应并且 TextStyle 应该能够发挥我的getFont()作用。

  static final TextStyle _mainTitle = TextStyle(
    fontFamily: "RedHatDisplay-Black",
   //This should take in the getFont function from the SizeConfigs.
    fontSize: getFont(36),
  );

TL; DR - 我想要一种将与 BuildContext 一起使用的 MediQuery 数据（SizeConfigs）传递给没有 BuildContext 的 ThemeData 的方法。

4

1 回答 1

0

一些属性需要上下文来获取它们的值。
要全局使用此类属性（不提供上下文），

  • 在您的初始小部件（或构建器）中，从 build 方法全局设置屏幕高度、屏幕宽度等值。
  • 将getFont函数与SizeConfig 分开，使其可全局访问，将SizeConfig.*替换为全局参数。

全局设置这些参数后，您无需在任何时候传递上下文。

于 2021-04-15T18:58:11.543 回答