Flutter基础widgets教程-SizedOverflowBox篇
【摘要】
1 SizedOverflowBox
SizedOverflowBox主要的布局行为有两点：1 尺寸部分。通过将自身的固定尺寸，传递给child，来达到控制child尺寸的目的；undefined
2 超出部分。可以突破父节点尺寸的限制，超出部分也可以被渲染显示，与OverflowBox类似。
2 构造函数
S...
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("加载中..."),
-
);
-
}
-
},
-
),
-
);
-
}
-
}
此代码已共享到码云，已对60多种widget做演示及解释。一直更新中https://gitee.com/nmgwap/flutter_app
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/125067238
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）