flutter 不同手机上的MediaQuery不一致

tgabmvqs  于 2023-03-24  发布在  Flutter
关注(0)|答案(3)|浏览(112)

我有一个scaffold,当我在不同的手机上测试时,它一直给我溢出错误。我在代码中只使用了mediaquery.of(context).size.height一次,我得到了溢出错误0f 40.392,这没有意义,因为我在声明高度时从未使用小数

Scaffold(
      backgroundColor: Colors.black,
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(50),
        child: AppBar(
          elevation: 0,
          iconTheme: const IconThemeData(color: Colors.blue),
          backgroundColor: mode.background1,
          actions: actionList(),
        ),
      ),
      body: Container(
        height: MediaQuery.of(context).size.height - 104,
        child: Column(
          children: [
            Container(
                //overflow error exists right here
                height: MediaQuery.of(context).size.height - 107,
                child: getWid(_selectedindex)),
            Container(
              height: 3,
              child: Row(
                children: [
                  mydivider(0),
                  mydivider(1),
                  mydivider(2),
                  mydivider(3),
                ],
              ),
            )
          ],
        ),
      ),
      bottomNavigationBar: Theme(
        data: Theme.of(context).copyWith(
            brightness: Brightness.dark,
            canvasColor: mode.canvasColor,
            primaryColor: const Color.fromARGB(255, 45, 124, 243),
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(bodySmall: const TextStyle(color: Colors.grey))),
        child: SizedBox(
          height: 54,
          child: BottomNavigationBar(
              onTap: (int index) {
                setState(() {
                  _selectedindex = index;
                });
              },
              currentIndex: _selectedindex,
              type: BottomNavigationBarType.fixed,
              selectedItemColor: Colors.blue,
              unselectedItemColor: Colors.grey,
              items: const [
                BottomNavigationBarItem(
                  icon: Icon(Icons.list),
                  label: 'List',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.local_grocery_store),
                  label: 'Checkout',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.history),
                  label: 'Transactions',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.settings_outlined),
                  label: 'Settings',
                )
              ]),
        ),
      ),
    )

很明显,我给了所有部件的高度。我认为唯一合乎逻辑的解释是从建立在这个特定的手机上的部件错误,但我不知道如何去做。加上我已经测试了许多应用程序说手机之前。我很感激你的帮助

aurhwmvo

aurhwmvo1#

而不是使用MediaQuery使用LayoutBuilder来构建UI。

return Scaffold(
  body: LayoutBuilder(
    builder: (context, constraints) {
      final width = constraints.maxWidth;

      return Text("");
    },
  ),
);

关于LayoutBuilderadaptive-responsive的更多信息。

ego6inou

ego6inou2#

你可能需要把你的身体包裹在安全区域小部件中。如果你的布局在一些手机上工作,而在其他型号上不工作,这是第一个想到的问题。

pkwftd7m

pkwftd7m3#

有一件很重要的事要提一下:不同的手机可能会有1.文本缩放和2.显示缩放。例如,视力不好的人可能会使用最大的文本,这可能会导致您的情况出现问题。x1c 0d1x
您可以使用双textScale = MediaQuery.of(context).textScaleFactor;
并根据这一点改变你的风格。或者你可以忽略缩放,所有用户都会看到同样的效果。

相关问题