1 SizedOverflowBox
SizedOverflowBox主要的布局行为有两点：
1 尺寸部分。通过将自身的固定尺寸，传递给child，来达到控制child尺寸的目的；undefined2 超出部分。可以突破父节点尺寸的限制，超出部分也可以被渲染显示，与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("加载中..."),
);
}
},
),
);
}
}
此代码已共享到码云，已对60多种widget做演示及解释。一直更新中
https://gitee.com/nmgwap/flutter_app
正文完