Skip to content

F
Flutter_app
提交 8a1167f6 作者: 杨俊磊
操作

容器类组件 填充Padding、尺寸限制类容器、装饰容器、变换

上级 150f30ce bee6495d
正在显示 包含 264 行增加 和 61 行删除
doc/dingbaojie/20200313Flutter容器类组件学习（1）/填充、尺寸限制类容器、装饰容器、变换 0 → 100644
填充要点记录:
填充要点记录:
EdgeInsets
我们看看EdgeInsets提供的便捷方法：
fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
all(double value) : 所有方向均使用相同数值的填充。
only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
尺寸限制类容器
尺寸限制类容器用于限制容器大小，Flutter中提供了多种这样的容器，如ConstrainedBox、SizedBox、UnconstrainedBox、AspectRatio等，本节将介绍一些常用的。
1. ConstrainedBox
ConstrainedBox用于对子组件添加额外的约束。例如，如果你想让子组件的最小高度是80像素，你可以使用const BoxConstraints(minHeight: 80.0)作为子组件的约束。
2. SizedBox
SizedBox用于给子元素指定固定的宽高
3. 多重限制
当有多重限制时，对于minWidth和minHeight来说，是取父子中相应数值较大的。因为只有这样才能保证父限制与子限制不冲突。
4. UnconstrainedBox
UnconstrainedBox不会对子组件产生任何限制，它允许其子组件按照其本身大小绘制。一般情况下，我们会很少直接使用此组件，但在"去除"多重限制的时候也许会有帮助
UnconstrainedBox对父组件限制的“去除”并非是真正的去除：上面例子中虽然红色区域大小是90×20，但上方仍然有80的空白空间。也就是说父限制的minHeight(100.0)仍然是生效的，
只不过它不影响最终子元素redBox的大小，但仍然还是占有相应的空间，可以认为此时的父ConstrainedBox是作用于子UnconstrainedBox上，而redBox只受子ConstrainedBox限制
如果要对子组件指定限制，那么一定要注意，因为一旦指定限制条件，子组件如果要进行相关自定义大小时将可能非常困难，因为子组件在不更改父组件的代码的情况下无法彻底去除其限制条件。
在实际开发中，当我们发现已经使用SizedBox或ConstrainedBox给子元素指定了宽高，但是仍然没有效果时，几乎可以断定：已经有父元素已经设置了限制！
5. 其它尺寸限制类容器
除了上面介绍的这些常用的尺寸限制类容器外，还有一些其他的尺寸限制类容器，
比如AspectRatio，它可以指定子组件的长宽比、LimitedBox 用于指定最大宽高、FractionallySizedBox 可以根据父容器宽高的百分比来设置子组件宽高
装饰容器DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等
doc/jiexifeng/20200313填充、尺寸限制类容器、装饰容器、变换.doc 0 → 100644
++ "b/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"
lib/dingbaojie/FirstDay/DecoratedBoxDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'SizelimitedDemo.dart';
class DecoratedBoxDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("装饰容器"), automaticallyImplyLeading: false),
body: Center(
child: Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)"),
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 40.0,top: 10.0,bottom: 30),
child: Text("EdgeInsets.only"),
),
Text("symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right"),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Text(" EdgeInsets.symmetric"),
),
Text("fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,20.0),
child: Text("EdgeInsets.fromLTRB"),
),
Text("all(double value) : 所有方向均使用相同数值的填充。"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.all(30),
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SizelimitedDemo()),
);
},
),
],
),
)
),
);
}
}
\ No newline at end of file
lib/dingbaojie/FirstDay/PaddingDemo.dart 0 → 100644
import 'package:flutter/material.dart';
import 'SizelimitedDemo.dart';
class PaddingDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("填充（Padding)"), automaticallyImplyLeading: false),
body: Center(
child: Padding(
//上下左右各添加16像素补白
padding: EdgeInsets.all(16.0),
child: Column(
//显式指定对齐方式为左对齐，排除对齐干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)"),
Padding(
//左边添加8像素补白
padding: const EdgeInsets.only(left: 40.0,top: 10.0,bottom: 30),
child: Text("EdgeInsets.only"),
),
Text("symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right"),
Padding(
//上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 30.0),
child: Text(" EdgeInsets.symmetric"),
),
Text("fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.fromLTRB(20.0,10.0,20.0,20.0),
child: Text("EdgeInsets.fromLTRB"),
),
Text("all(double value) : 所有方向均使用相同数值的填充。"),
Padding(
// 分别指定四个方向的补白
padding: const EdgeInsets.all(30),
child: Text("EdgeInsets.all"),
),
RaisedButton(
child: Text("带参跳转页面"),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SizelimitedDemo()),
);
},
),
],
),
)
),
);
}
}
\ No newline at end of file
lib/dingbaojie/FirstDay/SizelimitedDemo.dart 0 → 100644
import 'package:flutter/material.dart';
class SizelimitedDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:
AppBar(title: Text("尺寸限制类容器"), automaticallyImplyLeading: false),
body: Column(
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(
minWidth: double.infinity, //宽度尽可能大
minHeight: 50.0 //最小高度为50像素
),
child: Container(
height: 50.0,
child: ConstrainedBoxs,
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child: SizedBox(
width: 80.0,
height: 80.0,
child: sizeBoxs
),
),
Container(
margin: EdgeInsets.only(top: 20.0),
child:ConstrainedBox(
constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0), //父
child: UnconstrainedBox( //“去除”父级限制
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
child: UnconstrainedBoxs,
),
)
),
)
],
)
);
}
Widget ConstrainedBoxs=DecoratedBox(
child: Center(
child: Text("ConstrainedBox",),
),
decoration: BoxDecoration(color: Colors.red),
);
Widget sizeBoxs=DecoratedBox(
child: Center(
child: Text("sizeBox",),
),
decoration: BoxDecoration(color: Colors.blue),
);
Widget UnconstrainedBoxs=DecoratedBox(
child: Text("UnconstrainedBox",textAlign: TextAlign.center,),
decoration: BoxDecoration(color: Colors.blue),
);
}
\ No newline at end of file
lib/dingbaojie/dingbaojie.dart deleted 100644 → 0
import 'package:flutter/material.dart';
class dingbaojie extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
child: Text(
'丁保杰',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 30,
decoration:TextDecoration.lineThrough,
decorationStyle: TextDecorationStyle.double
),
),
width: 300,
height: 300,
alignment: Alignment.center,// 让内部居中显示
decoration: BoxDecoration(
color: Colors.red,
),
),
);
}
}
\ No newline at end of file
lib/jiexifeng/jiexifeng.dart
...@@ -9,7 +9,7 @@ class jiexifeng extends StatelessWidget{ ...@@ -9,7 +9,7 @@ class jiexifeng extends StatelessWidget{
return new Center( return new Center(
child: new Container( child: new Container(
child: Text( child: Text(
'介西风', '介西锋',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
......
lib/main.dart
...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; ...@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:flutterpro/router_path.dart'; import 'package:flutterpro/router_path.dart';
import 'package:flutterpro/yangjunlei/yangjunlei.dart'; import 'package:flutterpro/yangjunlei/yangjunlei.dart';
import 'dingbaojie/dingbaojie.dart'; import 'dingbaojie/FirstDay/PaddingDemo.dart';
import 'jiexifeng/jiexifeng.dart'; import 'jiexifeng/jiexifeng.dart';
import 'liangjialin/liangjialin.dart'; import 'liangjialin/liangjialin.dart';
...@@ -42,7 +42,7 @@ class MyAppBody extends StatelessWidget { ...@@ -42,7 +42,7 @@ class MyAppBody extends StatelessWidget {
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (context) => dingbaojie(), builder: (context) => PaddingDemo(),
)); ));
}, },
child: Text("丁保杰"), child: Text("丁保杰"),
......
lib/router_path.dart
...@@ -2,7 +2,7 @@ import 'package:flutter/cupertino.dart'; ...@@ -2,7 +2,7 @@ import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutterpro/yangjunlei/yangjunlei.dart'; import 'package:flutterpro/yangjunlei/yangjunlei.dart';
import 'dingbaojie/dingbaojie.dart'; import 'dingbaojie/FirstDay/PaddingDemo.dart';
import 'jiexifeng/jiexifeng.dart'; import 'jiexifeng/jiexifeng.dart';
import 'liangjialin/liangjialin.dart'; import 'liangjialin/liangjialin.dart';
...@@ -16,7 +16,7 @@ class RouterName { ...@@ -16,7 +16,7 @@ class RouterName {
class Router { class Router {
static Map<String, WidgetBuilder> generateRoute() { static Map<String, WidgetBuilder> generateRoute() {
Map<String, WidgetBuilder> routes = { Map<String, WidgetBuilder> routes = {
RouterName.dingbaojie: (context) => new dingbaojie(), RouterName.dingbaojie: (context) => new PaddingDemo(),
RouterName.jiexifeng: (context) => new jiexifeng(), RouterName.jiexifeng: (context) => new jiexifeng(),
RouterName.yangjunlei: (context) => new YangJunLei(), RouterName.yangjunlei: (context) => new YangJunLei(),
RouterName.liangjialin: (context) => new liangjialin(), RouterName.liangjialin: (context) => new liangjialin(),
......
pubspec.lock
...@@ -5,63 +5,63 @@ packages: ...@@ -5,63 +5,63 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: archive name: archive
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.11" version: "2.0.11"
args: args:
dependency: transitive dependency: transitive
description: description:
name: args name: args
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.5.2" version: "1.5.2"
async: async:
dependency: transitive dependency: transitive
description: description:
name: async name: async
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.4.0" version: "2.4.0"
boolean_selector: boolean_selector:
dependency: transitive dependency: transitive
description: description:
name: boolean_selector name: boolean_selector
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.5" version: "1.0.5"
charcode: charcode:
dependency: transitive dependency: transitive
description: description:
name: charcode name: charcode
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.2" version: "1.1.2"
collection: collection:
dependency: transitive dependency: transitive
description: description:
name: collection name: collection
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.14.11" version: "1.14.11"
convert: convert:
dependency: transitive dependency: transitive
description: description:
name: convert name: convert
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.1.1" version: "2.1.1"
crypto: crypto:
dependency: transitive dependency: transitive
description: description:
name: crypto name: crypto
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.1.3" version: "2.1.3"
cupertino_icons: cupertino_icons:
dependency: "direct main" dependency: "direct main"
description: description:
name: cupertino_icons name: cupertino_icons
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "0.1.3" version: "0.1.3"
flutter: flutter:
...@@ -78,49 +78,49 @@ packages: ...@@ -78,49 +78,49 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: image name: image
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.1.4" version: "2.1.4"
matcher: matcher:
dependency: transitive dependency: transitive
description: description:
name: matcher name: matcher
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "0.12.6" version: "0.12.6"
meta: meta:
dependency: transitive dependency: transitive
description: description:
name: meta name: meta
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.8" version: "1.1.8"
path: path:
dependency: transitive dependency: transitive
description: description:
name: path name: path
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.6.4" version: "1.6.4"
pedantic: pedantic:
dependency: transitive dependency: transitive
description: description:
name: pedantic name: pedantic
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.8.0+1" version: "1.8.0+1"
petitparser: petitparser:
dependency: transitive dependency: transitive
description: description:
name: petitparser name: petitparser
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.4.0" version: "2.4.0"
quiver: quiver:
dependency: transitive dependency: transitive
description: description:
name: quiver name: quiver
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.5" version: "2.0.5"
sky_engine: sky_engine:
...@@ -132,63 +132,63 @@ packages: ...@@ -132,63 +132,63 @@ packages:
dependency: transitive dependency: transitive
description: description:
name: source_span name: source_span
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.5.5" version: "1.5.5"
stack_trace: stack_trace:
dependency: transitive dependency: transitive
description: description:
name: stack_trace name: stack_trace
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.9.3" version: "1.9.3"
stream_channel: stream_channel:
dependency: transitive dependency: transitive
description: description:
name: stream_channel name: stream_channel
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.0" version: "2.0.0"
string_scanner: string_scanner:
dependency: transitive dependency: transitive
description: description:
name: string_scanner name: string_scanner
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.0.5" version: "1.0.5"
term_glyph: term_glyph:
dependency: transitive dependency: transitive
description: description:
name: term_glyph name: term_glyph
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.0" version: "1.1.0"
test_api: test_api:
dependency: transitive dependency: transitive
description: description:
name: test_api name: test_api
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "0.2.11" version: "0.2.11"
typed_data: typed_data:
dependency: transitive dependency: transitive
description: description:
name: typed_data name: typed_data
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "1.1.6" version: "1.1.6"
vector_math: vector_math:
dependency: transitive dependency: transitive
description: description:
name: vector_math name: vector_math
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "2.0.8" version: "2.0.8"
xml: xml:
dependency: transitive dependency: transitive
description: description:
name: xml name: xml
url: "https://pub.dartlang.org" url: "https://pub.flutter-io.cn"
source: hosted source: hosted
version: "3.5.0" version: "3.5.0"
sdks: sdks:
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论