首页 > 其他分享 >一统天下 flutter - UI: 安全区域

一统天下 flutter - UI: 安全区域

时间:2023-03-22 11:22:53浏览次数:53  
标签:padding 一统天下 UI 空隙 context true flutter

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - UI: 安全区域

示例如下:

lib\ui\safe_area.dart

/*
 * SafeArea - 安全区域
 * 实际上就是一个 padding,然后把刘海屏、全面屏、异形屏等中的非安全区放到 padding 的空隙中
 */

import 'package:flutter/material.dart';
import 'package:flutter_demo/helper.dart';

class SafeAreaDemo extends StatefulWidget {
  const SafeAreaDemo({Key? key}) : super(key: key);

  @override
  _SafeAreaDemoState createState() => _SafeAreaDemoState();
}

class _SafeAreaDemoState extends State<SafeAreaDemo> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange,
      /// SafeArea - 安全区域(实际上就是一个 padding,然后把刘海屏、全面屏、异形屏等中的非安全区放到 padding 的空隙中)
      body: SafeArea(
        child: Container(
          color: Colors.blue,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                /// MediaQuery.of(context).size - 获取设备的逻辑分辨率
                /// MediaQuery.of(context).padding - 获取设备的安全区域的 padding(实际上 SafeArea 就是基于此的)
                MyTextSmall("${MediaQuery.of(context).size}, ${MediaQuery.of(context).padding}"),
                const TextField(
                  style: TextStyle(color: Colors.white),
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.all(10),
                    filled: true,
                    fillColor: Colors.orange,
                  ),
                ),
              ],
            ),
          ),
        ),
        /// top/bottom/left/right - 是否需要把上下左右的安全区域空出来
        top: true,
        bottom: true,
        left: true,
        right: true,
        /// minimum - 设置 padding 的最小空隙
        minimum: EdgeInsets.zero,
        /// maintainBottomViewPadding - 是否保持底部的空隙值不变,默认值为 false
        ///   比如如果弹出软键盘的话:
        ///   当此值为 false 时,则底部的空隙值变为零
        ///   当此值为 true 时,则底部的空隙值与无软键盘时一致
        maintainBottomViewPadding: false,
      ),
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:padding,一统天下,UI,空隙,context,true,flutter
From: https://www.cnblogs.com/webabcd/p/flutter_lib_ui_safe_area.html

相关文章