关于flutter:Flutter深入浅出组件篇OverflowBoxSizedOverflowBox

OverflowBox 介绍

OverflowBox 容许子控件超出父控件的边界。这个个性次要能够用来实现文字或者按钮角标的。

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

OverflowBox 构造函数

const OverflowBox({
  Key? key,
  this.alignment = Alignment.center,
  this.minWidth,
  this.maxWidth,
  this.minHeight,
  this.maxHeight,
  Widget? child,
}) : super(key: key, child: child);

OverflowBox 属性和阐明

1、alignment

对于alignment 这个字段在后面的文章中咱们具体讲过，在 Flutter 深入浅出组件篇 —Align、AnimatedAlign 能够看到更具体的介绍

2、minWidth

子组件最小宽度

3、maxWidth

子组件最大宽度

2、minHeight

子组件最小高度

2、maxHeight

子组件最大高度

OverflowBox 根本应用

import 'package:flutter/material.dart';

class OverflowBoxExample extends StatefulWidget {
  @override
  _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
}

class _OverflowBoxExampleState extends State<OverflowBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("OverflowBoxExample"),
      ),
      body: Container(
        color: Colors.pink,
        width: 200.0,
        height: 200.0,
        padding: const EdgeInsets.all(5.0),
        child: OverflowBox(
          alignment: Alignment.topLeft,
          maxWidth: 300.0,
          maxHeight: 500.0,
          child: Container(
            color: Colors.greenAccent,
            width: 1000.0,
            height: 1000.0,
          ),
        ),
      ),
    );
  }
}

OverflowBox 成果展现

咱们能够看到绿色盒子忽视了粉色盒子的限度。

SizedOverflowBox 介绍

SizedOverflowBox 次要的布局行为有两点：

• 尺寸局部：通过将本身的固定尺寸，传递给 child，来达到管制 child 尺寸的目标；undefined
• 超出局部：能够冲破父节点尺寸的限度，超出局部也能够被渲染显示，与 OverflowBox 相似。

SizedOverflowBox 构造函数

const SizedOverflowBox({
  Key? key,
  required this.size,
  this.alignment = Alignment.center,
  Widget? child,
}) : assert(size != null),
     assert(alignment != null),
     super(key: key, child: child);

SizedOverflowBox 属性和阐明

1、size

盒子的尺寸大小限度

2、alignment

对于alignment 这个字段在后面的文章中咱们具体讲过，在 Flutter 深入浅出组件篇 —Align、AnimatedAlign 能够看到更具体的介绍

3、child

子组件

SizedOverflowBox 根本应用

import 'package:flutter/material.dart';

class OverflowBoxExample extends StatefulWidget {
  @override
  _OverflowBoxExampleState createState() => _OverflowBoxExampleState();
}

class _OverflowBoxExampleState extends State<OverflowBoxExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("OverflowBoxExample"),
      ),
      body: Container(
        color: Colors.orangeAccent,
        alignment: Alignment.bottomRight,
        width: 200.0,
        height: 200.0,
        // padding: EdgeInsets.all(5.0),
        child: SizedOverflowBox(size: Size(190.0, 200.0),
          child: Container(
            color: Colors.blueAccent,
            width: 200.0,
            height: 100.0,
          ),
        ),
      )
    );
  }
}

SizedOverflowBox 成果展现

总结

OverflowBox 容许子控件超出父控件的边界。这个个性次要能够用来实现文字或者按钮角标的。

SizedOverflowBox 也容许子控件超出父控件的边界，然而它与 OverflowBox 不同的在于还能够对子组件进行尺寸局部的限度。