关于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不同的在于还能够对子组件进行尺寸局部的限度。