在 Flutter 中调整垂直和水平方向响应的视图

Posted 2023-02-23

【中文标题】在 Flutter 中调整垂直和水平方向响应的视图

【英文标题】：Adjust Views Responsive in Flutter with Vertically and Horizontally Direction

【发布时间】：2022-01-01 18:06:37

【问题描述】：

我做了这个布局，但我不知道如何为所有设备制作响应式视图。

我把我的两个输出图像如下。

返回退出箭头（右上）和图像（中）。

我为注销箭头提供固定边距。并调整图像居中对齐的视图。

这是垂直的

这是水平的

这是我的设计代码。

  import 'dart:io';
  
  import 'package:flutter/cupertino.dart';
  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  import 'package:toast/toast.dart';
  
  import 'CurvedPainter.dart';
  
  void main() => runApp(Profile());
  
  class Profile extends StatelessWidget 
    const Profile(Key? key) : super(key: key);
  
    static const String _title = 'Profile';
  
    @override
    Widget build(BuildContext context) 
      return const MaterialApp(
        title: _title,
        home: MyStatefulProfile(),
      );
    
  
  
  class MyStatefulProfile extends StatefulWidget 
    const MyStatefulProfile(Key? key) : super(key: key);
  
    @override
    State<StatefulWidget> createState() => MyProfileState();
  
  
  class MyProfileState extends State<StatefulWidget> 
    @override
    Widget build(BuildContext context) 
      final _width = MediaQuery.of(context).size.width;
      final _height = MediaQuery.of(context).size.height;

return Scaffold(
  body: Padding(
    padding: EdgeInsets.all(0),
    child: Stack(
      // use for adjust views stack wise in app.
      alignment: Alignment.center,
      children: [
        Container(
          decoration: new BoxDecoration(
            color: const Color(0xFFFFD700),
          ),
          child: new Stack(
            children: <Widget>[
              new CustomPaint(
                size: Size(_width, _height),
                painter: CurvedPainter(),
              ),
            ],
          ),
        ),
        new InkWell(
          onTap: () 
            print('Logout Clicked');
            logout();
          ,
          child: new Container(
            height: 50,
            width: 50,
            alignment: Alignment.topRight,
            margin: const EdgeInsets.fromLTRB(290, 0, 0, 430),
            child: Icon(
              Icons.logout,
              color: Colors.black,
            ),
          ),
        ),
        Container(
          height: 150,
          width: 150,
          margin: const EdgeInsets.fromLTRB(0, 0, 0, 150),
          decoration: BoxDecoration(
              image: DecorationImage(
                image: new AssetImage('assets/images/ic_logo_main.png'),
                fit: BoxFit.fitHeight,
              ),
              shape: BoxShape.rectangle),
        ),
      ],
    ),

 
  ),
);

请帮忙。

【参考方案1】：

使用responsive_builder 或responsive_framework 库。

whit responsive_builder 你可以这样做，并为每个屏幕 tyoe 返回另一个小部件：

ResponsiveBuilder(
    builder: (context, sizingInformation) 
      // Check the sizing information here and return your UI
          if (sizingInformation.deviceScreenType == DeviceScreenType.desktop) 
          return Container(color:Colors.blue);
        

        if (sizingInformation.deviceScreenType == DeviceScreenType.tablet) 
          return Container(color:Colors.red);
        

        if (sizingInformation.deviceScreenType == DeviceScreenType.watch) 
          return Container(color:Colors.yellow);
        

        return Container(color:Colors.purple);
      ,
    ,
  );

【参考方案2】：

在使用 Stack 时，请使用 Positined、Align 等对齐的小部件来放置子级。

log out button可以是

   Positioned(
              right: 20,
              top: 20,
              child: InkWell(
                onTap: () 
  .....

或

       Align(
              alignment: Alignment(.9, -.9),
              child: InkWell(
                onTap: () 
                  print('Logout Clicked');
                  // logout();
                ,

对于ic_logo_main

         Align(
              alignment: Alignment.center,
              child: Container(
                height: 150,
                width: 150,
                // margin: const EdgeInsets.fromLTRB(0, 0, 0, 150), // not needed
                decoration: BoxDecoration(
                    color: Colors.red,
                    image: DecorationImage(
                      image: new AssetImage('assets/images/ic_logo_main.png'),
                      fit: BoxFit.fitHeight,
                    )

为Stack 小部件内的每个子组件使用定位小部件包装。

更多关于

Stack-class, Positioned widget Alignment-class

【讨论】：

非常感谢@YeasinSheikh，这是工作。如果您有任何关于 Flutter 设计的软材料，请与我分享该链接。

我关注flutter.dev、pub.dev，你可以在youtube上找到flutter官方频道，我最喜欢的是本周小工具

好的，再次感谢 Yeasin。☺