Question

我正在尝试学习 Flutter 并且我正在尝试开发一个应用程序。我有一个关于响应式设计的问题。我想并排放置按钮并在它们之间放置空间但是当屏幕尺寸改变时行设计崩溃.我不想为每个不同的尺寸做不同的设计。我想通过自动响应来使其适合高度和宽度。我该怎么做？谢谢解答

Answer 1

对于响应式设计，请使用 Mediaquery 类，该类将根据设备的屏幕尺寸进行调整。

MediaQueryData queryData;
queryData = MediaQuery.of(context);

获取设备屏幕的宽度和高度：

queryData.size.width
queryData.size.height

或者您可以使用 sizer 插件来轻松跟踪：sizer

针对不同屏幕尺寸制作响应式 UI 的最简单方法是 Sizer 插件。

Answer 2

您可以使用 Flexible 小部件。

Row(children:[
  Flexible(
    flex:2, // This button will be twice as big as the other one
    ElevatedButton(
      onPressed:(){},
      child:Text("Button1"),
    )
  ),
  
  SizedBox(width: 50),
  
  Flexible(
    flex:1,
    ElevatedButton(
      onPressed:(){},
      child:Text("Button2"),
    )
  ),
])

https://www.youtube.com/watch?v=CI7x0mAZiY0

响应式设计颤振

2 个答案: