06-09 响应式网页设计-水平垂直居中方法-学习总结

Posted 2023-05-16

参考技术A 1.  响应式布局：

需要媒体的接入方式来实现：

媒体的接入方式：@media （媒体类型） and （媒体特性）设置样式；

媒体类型： 一般用的较多的是screen 电脑屏幕 和 all 所有设备 ；

媒体特性：一般设置最大宽度和最小宽度；

max-width：600px：最大的宽度是600px，也就是在小于等于600px的时候，都生效；

min-width：600px：  最小的宽度是600px，也就是在大于等于600px的时候，都生效；

会有一种区间的情况：

ps：有一种特定某种媒体类型，前面可以加个only；

或者也可以用外部样式link去引入：

2. 给网页盒子设置最大宽度和最小宽度的作用（高度同理）：

max-width：可以设置最大的宽度，超出限制，则只展示最大宽度；决定了一个盒子的上限；

min-width：可以设置最小的宽度，缩小超出最小的宽度，则按照设置的最小的宽度显示，出现滚动条，决定了一个盒子的下限；

如果同时设置了宽度和最大宽度或者最小宽度，max-width / min-wdith > width ;有优先权；

3. 给整个页面设置高度 ：

因为不设置宽度时，可以自适应屏幕宽度，但是高度不行；

快捷方法：用vh（可视窗口的高度） vw（可视窗口的宽度）；

但是有局限性：用100vh 只会撑满可视窗口 ，页面往下滑动的时候，就没有了；

比如：

★4.怎么让盒子水平垂直都居中：

    margin：0 auto；的时候，只能实现水平居中；实现不了垂直居中；

★一种有固定宽高的时候：

（1）那么我们可以先变成绝对定位，靠绝对定位来达到垂直和水平都居中；

（2）有固定宽高的，实现水平垂直居中的第二种方法：（是用ie低版本浏览器的时候可以用的方式）：

★一种没有固定宽高的时候：

由内容撑起的高宽的时候，我们可以用平移来达到垂直和水平都居中；

用弹性盒子来实现水平垂直居中：

首先 父盒子必须要有高度 ，因为没有高度，无法自适应，就无效；

用这种方式来达到都居中， 要在父盒子里设置属性，就不是在子盒子里设置属性了 ：

用table方式实现垂直居中：

（要给表格里的td设置宽高，设置垂直居中即可）

用div转变为table一样可以实现：

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

【中文标题】在 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。☺