如何让这个flutter屏幕根据不同的屏幕尺寸做出响应？

Posted 2023-02-23

【中文标题】如何让这个flutter屏幕根据不同的屏幕尺寸做出响应？

【英文标题】：How to make this flutter screen responsive according to different screen sizes?

【发布时间】：2021-10-10 05:51:26

【问题描述】：

我也尝试了一些插件来响应这个应用程序屏幕。但它不起作用。如何使用 mediaquery 创建这个响应？ mediaquery 是否足够？

【参考方案1】：

您也可以使用LayoutBuilder 根据屏幕大小返回小部件，如下所示：

import 'package:flutter/material.dart';

class ResponsiveWidget extends StatelessWidget 
//here I just use small and large screens .
  final Widget largeScreen;

  // final Widget mediumScreen;
  final Widget smallScreen;

  const ResponsiveWidget(Key key, @required this.largeScreen, this.smallScreen) : super(key: key);

  static bool isSmallScreen(BuildContext context) 
    return MediaQuery.of(context).size.width <800;
  
  static bool isMediumScreen(BuildContext context) 
    return MediaQuery.of(context).size.width >= 700 && MediaQuery.of(context).size.width < 1000;
  
  static bool isLargeScreen(BuildContext context) 
    return MediaQuery.of(context).size.width >=800;
  
 

  @override
  Widget build(BuildContext context) 
    return LayoutBuilder(
      builder: (context, constraints) 
        if (constraints.maxWidth > 800) 
          return largeScreen;
         else
          return smallScreen;
      ,
    );
  

然后调用此ReposnsiveWidget 并传递大小屏幕小部件：

@override
  Widget build(BuildContext context) 
    return Scaffold(
      body: ResponsiveWidget(
                largeScreen: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Container(),
                    ),
                    Expanded(
                      flex: 2,
                      child: blogList(),
                    ),
                    Expanded(
                      flex: 1,
                      child: Container(),
                    )
                  ],
                ),
                smallScreen: blogList(),
              )
    );
  

【讨论】：

@Nadun 这对您有帮助吗？如果有帮助，请接受答案。

【参考方案2】：

要使用 MediaQuery 类使 Flutter 应用具有响应性， 您可以修改构建功能，如：

 @override
  Widget build(BuildContext context) 
    return Scaffold(
        backgroundColor: Theme.of(context).accentColor,
        body: MediaQuery.of(context).size.width > 600
            ? _landscapeforWeb()
            : _portraitLayout());
  

如果宽度大于 600，它会相应地返回更大的视图。 MediaQuery 确实对我有用，并且足以在 Flutter 中进行响应式设计。