在课堂外颤抖制作if语句

Question

大家好，我正在创建一个颤振应用程序，我需要做一个简单的 if 语句来决定 设备类型 我可以像这样在原始课程中做到这一点，它当然会正常工作

class _MyHomePageState extends State<MyHomePage> {

  @override

 Widget build(BuildContext context) {

    double font;
    double categoriesFont;
    double navHeight;
    double navIcons;
    if(DeviceInformation(context).width > 600){
      font = fontTablet;
      categoriesFont = categoriesTabletFont;
      navHeight = navTabletHeight;
      navIcons = navTabletIcons;
    }else{
      font = fontPhone;
      categoriesFont = categoriesPhoneFont;
      navHeight = navPhoneHeight;
      navIcons = navPhoneIcons;
    }

    return Scaffold(....

但是我不想把这段代码放在我拥有的每个页面中，我想创建一个类来执行这个 if 语句，它会返回 font 、 categoriesFont 、 navHeight 和 navIcons 变量，以便我可以根据需要使用它们在其他页面中

我想做这样的事情

//this class decides device type and use its corresponding percentages
class SetDeviceType{
  final context;
  SetDeviceType(this.context);
  double font;
  double categoriesFont;
  double navHeight;
  double navIcons;
  void deviceType(){
    if(DeviceInformation(context).width > 600){
      font = fontTablet;
      categoriesFont = categoriesTabletFont;
      navHeight = navTabletHeight;
      navIcons = navTabletIcons;
    }else{
      font = fontPhone;
      categoriesFont = categoriesPhoneFont;
      navHeight = navPhoneHeight;
      navIcons = navPhoneIcons;
    }
  }
  double get responsiveFont => font;
  double get responsiveCategoriesFont => categoriesFont;
  double get responsiveNavHeight => navHeight;
  double get responsiveNavIcons => navIcons;

}

然后我就可以做到了

DeviceType(context).font 

在确定设备屏幕类型后获取字体变量并使用它，但我没有找到解决方法。

这里的主要思想是使这个 if 语句可重用并使代码更简洁。

知道我怎样才能做到这一点吗？它不必是一个类，任何可以完成工作的东西都是受欢迎的，即函数等

提前致谢。

Answer 1

如果我正确理解了您的问题，您需要一个可以重复使用的类，以根据设备的宽度提供不同的值。

我认为您的解决方案非常接近。您可以使用带有主体的构造函数，并且可以在那里进行条件赋值。像这样：

import 'package:flutter/material.dart';

class DeviceInformation{

  //These fields are just some dummy values i used to test this
  //You can have these values wherever 
  static const fontTablet = 2.0;
  static const categoriesTabletFont = 2.0;
  static const navTabletHeight = 2.0;
  static const navTabletIcons = 2.0;
  static const fontPhone = 1.0;
  static const categoriesPhoneFont = 1.0;
  static const navPhoneHeight = 1.0;
  static const navPhoneIcons = 1.0;
  
  double _font;
  double _categoriesFont;
  double _navHeight;
  double _navIcons;
  
  double get responsiveFont => _font;
  double get responsiveCategoriesFont => _categoriesFont;
  double get responsiveNavHeight => _navHeight;
  double get responsiveNavIcons => _navIcons;
  
  DeviceInformation(BuildContext context){
  //This gives me the display width
  //Context.size.width would throw an error because
  //the widget's size hasn't been calculated at this point
  if(MediaQuery.of(context).size.width > 600){
      _font = fontTablet;
      _categoriesFont = categoriesTabletFont;
      _navHeight = navTabletHeight;
      _navIcons = navTabletIcons;
    }else{
      _font = fontPhone;
      _categoriesFont = categoriesPhoneFont;
      _navHeight = navPhoneHeight;
      _navIcons = navPhoneIcons;
    }
  }
}

然后你可以从 build 中调用它

class _MyHomePageState  extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {

    DeviceInformation deviceInfo = DeviceInformation(context);
    
    return Text('${deviceInfo.responsiveFont}');
  }
}

我希望这就是你要找的东西：D