1 SizedOverflowBox
SizedOverflowBox主要的布局行为有两点: 1 尺寸部分。通过将自身的固定尺寸,传递给child,来达到控制child尺寸的目的;undefined
2 超出部分。可以突破父节点尺寸的限制,超出部分也可以被渲染显示,与OverflowBox类似。
2 构造函数
SizedOverflowBox({ Key key, @required this.size, this.alignment = Alignment.center, Widget child, })
复制
3 常用属性
3.1 size:固定的尺寸
size: Size(100.0, 200.0),
复制
3.2 alignment:对齐方式
alignment:Alignment.topLeft,
复制
3.2.1 顶部左边
alignment:Alignment.topLeft,
复制
3.2.2 顶部中间
alignment:Alignment.topCenter,
复制
3.2.3 顶部右边
alignment:Alignment.topRight,
复制
3.2.4 中部左边
alignment:Alignment.centerLeft,
复制
3.2.5 中部中间
alignment:Alignment.center,
复制
3.2.6 中部右边
alignment:Alignment.centerRight,
复制
3.2.7 底部左边
alignment:Alignment.bottomLeft,
复制
3.2.8 底部中间
alignment:Alignment.bottomCenter,
复制
3.2.9 底部右边
alignment:Alignment.bottomRight,
复制
3.3 child:子控件
child: Text("内容"),
复制
4.显示效果
5.代码
import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; // 字体适配 import '../../utils/app_size.dart'; class ListSizedOverflowBox extends StatelessWidget { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, child: Scaffold( appBar: AppBar( title: Text('SizedOverflowBox'), backgroundColor: Color(0xFFfafcff), bottom: TabBar(labelColor: Color(0xff030303), tabs: [ Tab( text: "效果", ), Tab( text: "属性", ) ]), ), body: TabBarView(children: [ Container( decoration: new BoxDecoration( color: new Color(0xffffffff), borderRadius: new BorderRadius.circular((AppSize.width(20))), ), child: ShowEffect()), Container( decoration: new BoxDecoration( color: new Color(0xffffffff), borderRadius: new BorderRadius.circular((AppSize.width(20))), ), child: ShowAttribute()), ]), ), ); } } // 效果 class ShowEffect extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text("SizedOverflowBox"), ), body: Container( color: Colors.green, alignment: Alignment.topRight, width: 200.0, height: 200.0, padding: EdgeInsets.all(5.0), child: SizedOverflowBox( size: Size(100.0, 200.0), child: Container( color: Colors.red, width: 200.0, height: 100.0, ), ), ), ), ); } } // 属性 class ShowAttribute extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: FutureBuilder( future: rootBundle.loadString('lib/markdown/sizedOverflowBox.md'), builder: (BuildContext context, AsyncSnapshot snapshot) { if (snapshot.hasData) { return Markdown( data: snapshot.data, selectable: true, ); } else { return Center( child: Text("加载中..."), ); } }, ), ); } }
复制