Flutter基础widgets教程-SizedBox篇
【摘要】
1 SizedBox
两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小
2 构造函数
SizedBox({ Key key, this.width, this.height, Widget child })
3 常用属性
3.1 width：Siz...
1 SizedBox
两种用法：一是可用来设置两个widget之间的间距，二是可以用来限制子组件的大小
2 构造函数
-
SizedBox({
-
Key key,
-
this.width,
-
this.height,
-
Widget child
-
})
3 常用属性
3.1 width：SizedBox的宽
width: 250,
3.2 height：SizedBox的高
height: 250,
3.3 child：SizedBox的子widget
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 ListSizedBox extends StatelessWidget {
-
@override
-
Widget build(BuildContext context) {
-
return DefaultTabController(
-
length: 2,
-
child: Scaffold(
-
appBar: AppBar(
-
title: Text('SizedBox'),
-
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 Row(children: <Widget>[
-
SizedBox(
-
width: 150.0,
-
height: 150.0,
-
child: Container(
-
margin: EdgeInsets.all(20.0),
-
width: 200.0,
-
height: 200.0,
-
color: Colors.blue,
-
),
-
),
-
SizedBox(
-
width: 100.0,
-
height: 100.0,
-
child: Container(
-
margin: EdgeInsets.all(20.0),
-
width: 200.0,
-
height: 200.0,
-
color: Colors.yellow,
-
),
-
),
-
SizedBox(
-
width: 100.0,
-
height: 100.0,
-
child: Container(
-
margin: EdgeInsets.all(20.0),
-
width: 200.0,
-
height: 200.0,
-
color: Colors.red,
-
),
-
)
-
]);
-
}
-
}
-
-
// 属性
-
class ShowAttribute extends StatelessWidget {
-
@override
-
Widget build(BuildContext context) {
-
return Container(
-
child: FutureBuilder(
-
future: rootBundle.loadString('lib/markdown/sizedBox.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/125067322
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）