时间戳

首页 > 解决方案 > 通过将所有内容包含在根小部件中来响应式布局/如何使用一个根小部件更改后代小部件的所有双精度值

flutter - 通过将所有内容包含在根小部件中来响应式布局/如何使用一个根小部件更改后代小部件的所有双精度值

问题描述

我正在编写自己的响应式布局，如下所示： 而不是编写普通代码

Container(padding: EdgeInsets.all(10)),
Text("abc", style: TextStyle(fontSize: 20)),

我使用了一个函数 responsiveSize()

Container(padding: EdgeInsets.all(responsiveSize(10, context))),
Text("abc", style: TextStyle(fontSize: responsiveSize(20, context))),

并将函数 responsiveSize() 定义为

double responsiveSize(double number, BuildContext context){
  if (MediaQuery.of(context).size.width < 450) {
    return number;
  } else {
    return number * 1.5;
  }
}

或类似的东西，我可以很容易地改变。

但是这样做的问题是，我必须用函数 responsiveSize() 将代码中的每个双精度值包装起来，这非常乏味。我正在寻找一种将所有小部件包装在一个根小部件中的方法，例如将 MaterialApp 小部件包装在 ResponsiveSize 小部件中：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveSize(
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}

并编写普通代码（如上所述，使用双精度值而不将它们包装在 responsiveSize() 函数中）并以我不知道的某种方式定义 ResponsiveSize 小部件。这样，我可以只通过一个小部件使用响应式布局，并且如果我以后不想要它，可以轻松删除根 ResponsiveSize 小部件。

但是，这涉及更改 ResponsiveSize 小部件的所有后代小部件中的所有双精度值，这是我不知道该怎么做的事情。

所以，我想知道如何更改根小部件的所有后代小部件的所有双精度值？我应该如何定义根小部件？

标签： flutterresponsive

解决方案

LayoutBuilder小部件可能是您正在寻找的。

推荐阅读