android - Flutter 中不同的屏幕尺寸和 dpi 缩放比例

Question

  @override
  Widget build(BuildContext context) {

    final double shortesSide = MediaQuery.of(context).size.shortestSide;
    final bool useMobileLayout = shortesSide <= 600.0; //use this for mobile
    final Orientation orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      backgroundColor: Color.fromRGBO(246, 246, 246, 1.0),
      appBar: AppBar(
          backgroundColor: Color.fromRGBO(121, 85, 72, 1.0),
          centerTitle: true,
          title: Text(...),
          leading: IconButton(
            onPressed: () {
              Navigator.pushReplacementNamed(context, 'Menu');
            },
            icon: Icon(
              Icons.arrow_back,
              color: Colors.white,
            ),
          )),
      body: useMobileLayout
          ? _buildPhoneView(orientation: orientation)
          : _buildTabletView(orientation: orientation),
    );
  }



//phone
  Container _buildPhoneView({@required Orientation orientation}) {...}

//tablet
  Container _buildTabletView({@required Orientation orientation}) {...}

<600 的平板电脑等小型手机是否存在断点？我是否需要构建第三种布局，或者我可以根据屏幕尺寸更正文本和小部件。谢谢

Answer 1

这取决于您构建的布局的复杂性。例如，对于复杂的布局，当屏幕尺寸变小时，小部件可能会覆盖其他小部件，或者当它们没有空间时可能会出现像素溢出。尽管 Flutter 在不同屏幕上的扩展性很好，但有时这还不够。

我所做的是使用 LayoutBuilder小部件，并基于其框约束，我返回适合其当前约束的屏幕布局。

*请注意，LayoutBuilder 小部件从其父小部件获取约束，因此请确保将其作为顶级小部件。

 Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: LayoutBuilder(
    builder: (context, constraints) {
      if (constraints.maxWidth < 600) {
        return SmallPage();
      } else {
        return BigPage();
      }
    },
  ),
);