Skip to content

Commit d46db76

Browse files
DIVINER-onlyDIVINER-only
committed
FittedBox
1 parent c218ec1 commit d46db76

File tree

6 files changed

+352
-0
lines changed

6 files changed

+352
-0
lines changed

‎docs/widget/regular/fittedbox/code.md‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
### FittedBox
2+
3+
``` dart
4+
import 'package:flutter/material.dart';
5+
6+
class Index extends StatefulWidget {
7+
@override
8+
_IndexState createState() => _IndexState();
9+
}
10+
11+
class _IndexState extends State<Index> {
12+
List fit = [
13+
BoxFit.contain,
14+
BoxFit.cover,
15+
BoxFit.fill,
16+
BoxFit.fitHeight,
17+
BoxFit.fitWidth,
18+
BoxFit.none,
19+
BoxFit.scaleDown
20+
];
21+
List fitValue1 = ['contain', 'cover', 'fill'];
22+
List fitValue2 = ['fitHeight', 'fitWidth'];
23+
List fitValue3 = ['none', 'scaleDown'];
24+
int fitIndex = 0;
25+
26+
List alignment = [
27+
Alignment.topLeft,
28+
Alignment.topCenter,
29+
Alignment.topRight,
30+
Alignment.centerLeft,
31+
Alignment.center,
32+
Alignment.centerRight,
33+
Alignment.bottomLeft,
34+
Alignment.bottomCenter,
35+
Alignment.bottomRight
36+
];
37+
List alignmentValue1 = ['topLeft', 'topCenter', 'topRight'];
38+
List alignmentValue2 = ['centerLeft', 'center', 'centerRight'];
39+
List alignmentValue3 = ['bottomLeft', 'bottomCenter', 'bottomRight'];
40+
int alignmentIndex = 0;
41+
42+
@override
43+
Widget build(BuildContext context) {
44+
return Scaffold(
45+
appBar: AppBar(title: Text('FittedBox Demo'),),
46+
body: ListView(
47+
children: <Widget>[
48+
SizedBox(
49+
child: Text('修改fit的值'),
50+
),
51+
Row(
52+
children: List.generate(3, (index) {
53+
return FlatButton(
54+
child: Text(fitValue1[index]),
55+
onPressed: (){
56+
setState(() {
57+
fitIndex = index;
58+
});
59+
},
60+
);
61+
}),
62+
),
63+
Row(
64+
children: List.generate(2, (index) {
65+
return FlatButton(
66+
child: Text(fitValue2[index]),
67+
onPressed: (){
68+
setState(() {
69+
fitIndex = index + 3;
70+
});
71+
},
72+
);
73+
}),
74+
),
75+
Row(
76+
children: List.generate(2, (index) {
77+
return FlatButton(
78+
child: Text(fitValue3[index]),
79+
onPressed: (){
80+
setState(() {
81+
fitIndex = index + 5;
82+
});
83+
},
84+
);
85+
}),
86+
),
87+
SizedBox(
88+
child: Text('修改alignment的值'),
89+
),
90+
Row(
91+
children: List.generate(3, (index) {
92+
return FlatButton(
93+
child: Text('${alignmentValue1[index]}', style: TextStyle(fontSize: 12.0),),
94+
onPressed: (){
95+
setState(() {
96+
alignmentIndex = index;
97+
});
98+
},
99+
);
100+
}),
101+
),
102+
Row(
103+
children: List.generate(3, (index) {
104+
return FlatButton(
105+
child: Text('${alignmentValue2[index]}', style: TextStyle(fontSize: 12.0),),
106+
onPressed: (){
107+
setState(() {
108+
alignmentIndex = index + 3;
109+
});
110+
},
111+
);
112+
}),
113+
),
114+
Row(
115+
children: List.generate(3, (index) {
116+
return FlatButton(
117+
child: Text('${alignmentValue3[index]}', style: TextStyle(fontSize: 11.0),),
118+
onPressed: (){
119+
setState(() {
120+
alignmentIndex = index + 6;
121+
});
122+
},
123+
);
124+
}),
125+
),
126+
Center(
127+
child: Container(
128+
width: 200.0,
129+
height: 200.0,
130+
color: Color(0xfff8bbd0),
131+
// color: Theme.of(context).primaryColor,
132+
constraints: BoxConstraints(
133+
maxWidth: 200.0
134+
),
135+
margin: const EdgeInsets.all(10.0),
136+
child: FittedBox(
137+
fit: fit[fitIndex],
138+
alignment: alignment[alignmentIndex],
139+
child: Container(
140+
color: Color(0xfff48fb1),
141+
child: Text('FittedBox', style: TextStyle(color: Colors.white),),
142+
),
143+
),
144+
),
145+
)
146+
],
147+
)
148+
);
149+
}
150+
}
151+
```

‎docs/widget/regular/fittedbox/index.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
## **FittedBox**
2+
>
3+
根据需要，对child进行缩放（Scale）以及位置调整（Position）
4+
* 如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局
5+
* 如果没有外部约束条件，则跟child尺寸一致，指定的缩放以及位置属性将不起作用。
6+
7+
### 构造方法
8+
``` dart
9+
FittedBox({
10+
Key key,
11+
this.fit = BoxFit.contain,
12+
this.alignment = Alignment.center,
13+
Widget child,
14+
})
15+
```
16+
17+
### 属性介绍
18+
* fit: 缩放的方式，默认的属性是BoxFit.contain, 可参考Demo变化
19+
* alignment: 对齐方式，默认的属性是Alignment.center，居中显示child, 可参考Demo变化
20+
* child: FittedBox中的内容widget

‎lib/widget/regular/fittedbox/demo.dart‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
import 'package:flutter/material.dart';
2+
3+
class Index extends StatefulWidget {
4+
@override
5+
_IndexState createState() => _IndexState();
6+
}
7+
8+
class _IndexState extends State<Index> {
9+
List fit = [
10+
BoxFit.contain,
11+
BoxFit.cover,
12+
BoxFit.fill,
13+
BoxFit.fitHeight,
14+
BoxFit.fitWidth,
15+
BoxFit.none,
16+
BoxFit.scaleDown
17+
];
18+
List fitValue1 = ['contain', 'cover', 'fill'];
19+
List fitValue2 = ['fitHeight', 'fitWidth'];
20+
List fitValue3 = ['none', 'scaleDown'];
21+
int fitIndex = 0;
22+
23+
List alignment = [
24+
Alignment.topLeft,
25+
Alignment.topCenter,
26+
Alignment.topRight,
27+
Alignment.centerLeft,
28+
Alignment.center,
29+
Alignment.centerRight,
30+
Alignment.bottomLeft,
31+
Alignment.bottomCenter,
32+
Alignment.bottomRight
33+
];
34+
List alignmentValue1 = ['topLeft', 'topCenter', 'topRight'];
35+
List alignmentValue2 = ['centerLeft', 'center', 'centerRight'];
36+
List alignmentValue3 = ['bottomLeft', 'bottomCenter', 'bottomRight'];
37+
int alignmentIndex = 0;
38+
39+
@override
40+
Widget build(BuildContext context) {
41+
return Scaffold(
42+
appBar: AppBar(title: Text('FittedBox Demo'),),
43+
body: ListView(
44+
children: <Widget>[
45+
SizedBox(
46+
child: Text('修改fit的值'),
47+
),
48+
Row(
49+
children: List.generate(3, (index) {
50+
return FlatButton(
51+
child: Text(fitValue1[index]),
52+
onPressed: (){
53+
setState(() {
54+
fitIndex = index;
55+
});
56+
},
57+
);
58+
}),
59+
),
60+
Row(
61+
children: List.generate(2, (index) {
62+
return FlatButton(
63+
child: Text(fitValue2[index]),
64+
onPressed: (){
65+
setState(() {
66+
fitIndex = index + 3;
67+
});
68+
},
69+
);
70+
}),
71+
),
72+
Row(
73+
children: List.generate(2, (index) {
74+
return FlatButton(
75+
child: Text(fitValue3[index]),
76+
onPressed: (){
77+
setState(() {
78+
fitIndex = index + 5;
79+
});
80+
},
81+
);
82+
}),
83+
),
84+
SizedBox(
85+
child: Text('修改alignment的值'),
86+
),
87+
Row(
88+
children: List.generate(3, (index) {
89+
return FlatButton(
90+
child: Text('${alignmentValue1[index]}', style: TextStyle(fontSize: 12.0),),
91+
onPressed: (){
92+
setState(() {
93+
alignmentIndex = index;
94+
});
95+
},
96+
);
97+
}),
98+
),
99+
Row(
100+
children: List.generate(3, (index) {
101+
return FlatButton(
102+
child: Text('${alignmentValue2[index]}', style: TextStyle(fontSize: 12.0),),
103+
onPressed: (){
104+
setState(() {
105+
alignmentIndex = index + 3;
106+
});
107+
},
108+
);
109+
}),
110+
),
111+
Row(
112+
children: List.generate(3, (index) {
113+
return FlatButton(
114+
child: Text('${alignmentValue3[index]}', style: TextStyle(fontSize: 11.0),),
115+
onPressed: (){
116+
setState(() {
117+
alignmentIndex = index + 6;
118+
});
119+
},
120+
);
121+
}),
122+
),
123+
Center(
124+
child: Container(
125+
width: 200.0,
126+
height: 200.0,
127+
color: Color(0xfff8bbd0),
128+
// color: Theme.of(context).primaryColor,
129+
constraints: BoxConstraints(
130+
maxWidth: 200.0
131+
),
132+
margin: const EdgeInsets.all(10.0),
133+
child: FittedBox(
134+
fit: fit[fitIndex],
135+
alignment: alignment[alignmentIndex],
136+
child: Container(
137+
color: Color(0xfff48fb1),
138+
child: Text('FittedBox', style: TextStyle(color: Colors.white),),
139+
),
140+
),
141+
),
142+
)
143+
],
144+
)
145+
);
146+
}
147+
}

‎lib/widget/regular/fittedbox/index.dart‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import 'package:flutter/material.dart';
2+
import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
3+
import 'demo.dart' as Demo;
4+
5+
class Index extends StatefulWidget {
6+
static String name = 'FittedBox';
7+
static String originCodeUrl = '';
8+
static String codeUrl = 'docs/widget/regular/fittedbox/code.md';
9+
static String mdUrl = 'docs/widget/regular/fittedbox/index.md';
10+
@override
11+
_IndexState createState() => _IndexState();
12+
}
13+
14+
class _IndexState extends State<Index> {
15+
@override
16+
Widget build(BuildContext context) {
17+
return WidgetComp.Index(
18+
name: Index.name,
19+
codeUrl: Index.codeUrl,
20+
originCodeUrl: Index.originCodeUrl,
21+
mdUrl: Index.mdUrl,
22+
demoChild: <Widget>[
23+
Demo.Index()
24+
],
25+
);
26+
}
27+
}

‎lib/widget/regular/index.dart‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import 'container/index.dart' as Container;
55
import 'padding/index.dart' as Padding;
66
import 'align/index.dart' as Align;
77
import 'center/index.dart' as Center;
8+
import 'fittedbox/index.dart' as FittedBox;
89

910
const nameSpaces = '/regular_';
1011

@@ -38,6 +39,11 @@ List widgets = [
3839
widget: Center.Index(),
3940
code: 57932, // format_indent_decrease
4041
name: Center.Index.name
42+
),
43+
ItemInfo(
44+
widget: FittedBox.Index(),
45+
code: 60231, // format_indent_decrease
46+
name: FittedBox.Index.name
4147
)
4248
];
4349

‎pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ flutter:
6262
- docs/widget/regular/padding/
6363
- docs/widget/regular/align/
6464
- docs/widget/regular/center/
65+
- docs/widget/regular/fittedbox/
6566
# An image asset can refer to one or more resolution-specific "variants", see
6667
# https://flutter.io/assets-and-images/#resolution-aware.
6768

0 commit comments

Comments
 (0)