• Flutter组件--OverflowBox、SizedOverflowBox(子组件超出父组件裁剪)


    1.OverflowBox介绍

    OverflowBox 允许子控件超出父控件的边界。这个特性主要可以用来实现文字或者按钮角标的.

    OverflowBox构造函数

    1. const OverflowBox({
    2. Key? key,
    3. this.alignment = Alignment.center,
    4. this.minWidth,
    5. this.maxWidth,
    6. this.minHeight,
    7. this.maxHeight,
    8. Widget? child,
    9. }) : super(key: key, child: child);

    OverflowBox属性和说明

    序列号字段属性描述
    1alignmentAlignmentGeometry子组件对齐方式
    2minWidthdouble最小宽度
    3maxWidthdouble最大宽度
    4minHeightdouble最小高度
    5maxHeightdouble最大高度

    OverflowBox基本使用

    1. import 'package:flutter/material.dart';
    2. class OverflowBoxExample extends StatefulWidget {
    3. @override
    4. _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
    5. }
    6. class _OverflowBoxExampleState extends State<OverflowBoxExample> {
    7. @override
    8. Widget build(BuildContext context) {
    9. return Scaffold(
    10. appBar: AppBar(
    11. title: Text("OverflowBoxExample"),
    12. ),
    13. body: Container(
    14. color: Colors.pink,
    15. width: 200.0,
    16. height: 200.0,
    17. padding: const EdgeInsets.all(5.0),
    18. child: OverflowBox(
    19. alignment: Alignment.topLeft,
    20. maxWidth: 300.0,
    21. maxHeight: 500.0,
    22. child: Container(
    23. color: Colors.greenAccent,
    24. width: 1000.0,
    25. height: 1000.0,
    26. ),
    27. ),
    28. ),
    29. );
    30. }
    31. }

    OverflowBox效果展示

    我们可以看到绿色盒子无视了粉色盒子的限制。

    2.SizedOverflowBox 

    SizedOverflowBox 主要的布局行为有两点:

    • 尺寸部分:通过将自身的固定尺寸,传递给child,来达到控制child尺寸的目的;undefined
    • 超出部分:可以突破父节点尺寸的限制,超出部分也可以被渲染显示,与OverflowBox类似

    SizedOverflowBox构造函数

    1. const SizedOverflowBox({
    2. Key? key,
    3. required this.size,
    4. this.alignment = Alignment.center,
    5. Widget? child,
    6. }) : assert(size != null),
    7. assert(alignment != null),
    8. super(key: key, child: child);

     SizedOverflowBox属性和说明

    序列号字段属性描述
    1sizeSize尺寸大小限制
    2alignmentAlignmentGeometry子组件对齐方式
    3childWidget子组件

    SizedOverflowBox基本使用

    1. import 'package:flutter/material.dart';
    2. class OverflowBoxExample extends StatefulWidget {
    3. @override
    4. _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
    5. }
    6. class _OverflowBoxExampleState extends State<OverflowBoxExample> {
    7. @override
    8. Widget build(BuildContext context) {
    9. return Scaffold(
    10. appBar: AppBar(
    11. title: Text("OverflowBoxExample"),
    12. ),
    13. body: Container(
    14. color: Colors.orangeAccent,
    15. alignment: Alignment.bottomRight,
    16. width: 200.0,
    17. height: 200.0,
    18. // padding: EdgeInsets.all(5.0),
    19. child: SizedOverflowBox(
    20. size: Size(190.0, 200.0),
    21. child: Container(
    22. color: Colors.blueAccent,
    23. width: 200.0,
    24. height: 100.0,
    25. ),
    26. ),
    27. )
    28. );
    29. }
    30. }

    SizedOverflowBox效果展示

    总结

    OverflowBox 允许子控件超出父控件的边界。这个特性主要可以用来实现文字或者按钮角标的。

    SizedOverflowBox 也允许子控件超出父控件的边界,但是它与OverflowBox不同的在于还可以对子组件进行尺寸部分的限制。

  • 相关阅读:
    Android12 ethernet和wifi共存
    《HelloGitHub》第 89 期
    如何通过Python进行图片批量下载?
    DC-3靶场搭建及渗透实战详细过程(DC靶场系列)
    【开发记录】利用QT读取Excel并写入数据
    功能测试(四)—— web项目购物车模块测试与网络知识
    保姆式教程:MAC安装Android studio(包括安装JDK,Android SDK),解决gradle下载慢的问题
    PHP 反序列化漏洞:序列化与反序列化
    我的Go并发之旅、01 并发哲学与并发原语
    C++阶段05笔记01【C++提高编程资料(模板概念、函数模板、类模板)】
  • 原文地址:https://blog.csdn.net/eastWind1101/article/details/127970185