Skip to content

F
Flutter_app
提交 90444998 作者: 介西锋
操作

容器学习

上级 3aada521
正在显示 包含 242 行增加 和 41 行删除
doc/jiexifeng/20200313填充、尺寸限制类容器、装饰容器、变换.doc
-- "a/doc/jiexifeng/20200313\345\241\253\345\205\205\343\200\201\345\260\272\345\257\270\351\231\220\345\210\266\347\261\273\345\256\271\345\231\250\343\200\201\350\243\205\351\245\260\345\256\271\345\231\250\343\200\201\345\217\230\346\215\242.doc"
学习内容：填充、尺寸限制类容器、装饰容器、变换
时间：2020/03/13
备注：因为配合优鸿修改云课堂iPad项目，学习任务未完成，明天将装饰容器和变换补上
1.填充
填充所指的就是Padding，Padding可以给子节点添加留白，和边距效果类似。
EdgeInsetsGeometry是一个抽象类，开发中，我们一般都使用EdgeInsets类，
它是EdgeInsetsGeometry的一个子类，定义了一些便捷方法.
常用方法有：
all(double value) //所有方向均使用相同数值的填充。
only({left, top, right ,bottom }) //可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal })：//用于设置对称方向的padding
fromLTRB(double left, double top, double right, double bottom) //分别指定四个方向的填充。
2.尺寸限制类容器
尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，
如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio
ConstrainedBox用于对子组件添加额外的约束,如果你想让子组件的最小高度是80像素，
你可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束
SizedBox用于给子元素指定固定的宽高 SizedBox(width: 80.0,height: 80.0)
UnconstrainedBox不会对子组件产生任何限制，它允许其子组件按照其本身大小绘制,但他会 “去除”父ConstrainedBox的限制
3.装饰容器
4.变换
lib/jiexifeng/ThirteenPage.dart 0 → 100644
import 'package:flutter/material.dart';
class Param {
final String title;
Param(this.title);
}
class ThirteenPage extends StatelessWidget {
const ThirteenPage({Key key, this.param}) : super(key: key);
final Param param;
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text(param.title + "学习"),
),
body: ThirteenPageBody(),
);
}
}
class ThirteenPageBody extends StatefulWidget {
@override
_ThirteenPageBodyState createState() => _ThirteenPageBodyState();
}
class _ThirteenPageBodyState extends State<ThirteenPageBody> {
Widget redBox = DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
);
Widget build(BuildContext context) {
return new SafeArea(
child: new Container(
padding: const EdgeInsets.all(20),
decoration: new BoxDecoration(
color: Colors.white,
),
child: Column(
children: <Widget>[
new Text(
'padding的四种形式\n',
textAlign: TextAlign.left,
),
new Row(
children: <Widget>[
new CustomPadding(),
],
),
new Text(
'尺寸限制类容器\n',
textAlign: TextAlign.left,
),
ConstrainedBox(
constraints: BoxConstraints(
minWidth: double.infinity, //宽度尽可能大
minHeight: 50.0 //最小高度为50像素
),
child: Container(
height: 5.0,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: new Text("ConstrainedBox"),
),
),
),
new Text(' '),
SizedBox(
width: 80.0,
height: 80.0,
child: DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
child: new Text("SizedBox"),
),
),
ConstrainedBox(
constraints:
BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
child: UnconstrainedBox(
//“去除”父级限制
child: ConstrainedBox(
constraints:
BoxConstraints(minWidth: 90.0, minHeight: 20.0), //子
child: redBox,
),
))
],
),
),
);
}
}
class CustomPadding extends StatelessWidget {
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: Colors.orange,
),
child: new Row(
children: <Widget>[
new Container(
decoration: new BoxDecoration(
color: Colors.yellow,
),
padding: const EdgeInsets.only(left: 10, top: 20),
child: new Text("only"),
),
new Container(
decoration: new BoxDecoration(color: Colors.red),
padding: const EdgeInsets.all(10),
child: new Text("all"),
),
new Container(
decoration: new BoxDecoration(
color: Colors.blue,
),
padding: const EdgeInsets.fromLTRB(2, 4, 6, 8),
child: new Text("fromLTRB"),
),
new Container(
decoration: new BoxDecoration(
color: Colors.grey,
),
padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 30),
child: new Text("symmetric"),
),
],
),
);
}
}
lib/jiexifeng/jiexifeng.dart
import 'package:flutter/material.dart';
//自定义类文件
import 'ThirteenPage.dart';
class jiexifeng extends StatelessWidget{
class jiexifeng extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text("jiexifeng"),
),
body: MyPageBody(),
);
}
}
return new Center(
class MyPageBody extends StatefulWidget {
@override
_MyPageBodyState createState() => _MyPageBodyState();
}
class _MyPageBodyState extends State<MyPageBody> {
Widget build(BuildContext context) {
return new SafeArea(
child: new Container(
child: Text(
'介西锋',
textAlign: TextAlign.center,
style: TextStyle(
padding: const EdgeInsets.only(top: 20, left: 20),
decoration: new BoxDecoration(
color: Colors.white,
fontSize: 30,
decoration:TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double
),
child: Column(
children: <Widget>[
new Row(
children: <Widget>[
new FlatButton(
onPressed: () {
Navigator.push(context, new MaterialPageRoute(
fullscreenDialog: false,
builder: (context) {
return ThirteenPage(
param: new Param("2020/03/13"),
);
},
));
},
color: Colors.orange,
textColor: Colors.white,
child: new Text("2020/03/13"),
),
],
),
new Row(
children: <Widget>[
new FlatButton(
onPressed: () {},
color: Colors.grey,
textColor: Colors.white,
child: new Text("2020/03/14"),
),
],
),
width: 300,
height: 300,
alignment: Alignment.center,// 让内部居中显示
decoration: BoxDecoration(
color: Colors.red,
],
),
),
);
......
pubspec.lock
......@@ -5,63 +5,63 @@ packages:
dependency: transitive
description:
name: archive
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.11"
args:
dependency: transitive
description:
name: args
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.2"
async:
dependency: transitive
description:
name: async
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
boolean_selector:
dependency: transitive
description:
name: boolean_selector
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
charcode:
dependency: transitive
description:
name: charcode
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.2"
collection:
dependency: transitive
description:
name: collection
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.14.11"
convert:
dependency: transitive
description:
name: convert
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
crypto:
dependency: transitive
description:
name: crypto
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.3"
cupertino_icons:
dependency: "direct main"
description:
name: cupertino_icons
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.3"
flutter:
......@@ -78,49 +78,49 @@ packages:
dependency: transitive
description:
name: image
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.4"
matcher:
dependency: transitive
description:
name: matcher
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.12.6"
meta:
dependency: transitive
description:
name: meta
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.8"
path:
dependency: transitive
description:
name: path
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.6.4"
pedantic:
dependency: transitive
description:
name: pedantic
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0+1"
petitparser:
dependency: transitive
description:
name: petitparser
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.4.0"
quiver:
dependency: transitive
description:
name: quiver
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.5"
sky_engine:
......@@ -132,63 +132,63 @@ packages:
dependency: transitive
description:
name: source_span
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.5.5"
stack_trace:
dependency: transitive
description:
name: stack_trace
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.9.3"
stream_channel:
dependency: transitive
description:
name: stream_channel
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.0"
string_scanner:
dependency: transitive
description:
name: string_scanner
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.0.5"
term_glyph:
dependency: transitive
description:
name: term_glyph
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.0"
test_api:
dependency: transitive
description:
name: test_api
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "0.2.11"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "1.1.6"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "2.0.8"
xml:
dependency: transitive
description:
name: xml
url: "https://pub.flutter-io.cn"
url: "https://pub.dartlang.org"
source: hosted
version: "3.5.0"
sdks:
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论