Skip to content

Commit 0f7e7c6

Browse files
DIVINER-onlyDIVINER-only
committed
align
1 parent 4959ac3 commit 0f7e7c6

File tree

11 files changed

+246
-39
lines changed

11 files changed

+246
-39
lines changed

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

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
### Align
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 alignment = [
13+
Alignment.topLeft,
14+
Alignment.topCenter,
15+
Alignment.topRight,
16+
Alignment.centerLeft,
17+
Alignment.center,
18+
Alignment.centerRight,
19+
Alignment.bottomLeft,
20+
Alignment.bottomCenter,
21+
Alignment.bottomRight
22+
];
23+
List alignmentValue1 = ['topLeft', 'topCenter', 'topRight'];
24+
List alignmentValue2 = ['centerLeft', 'center', 'centerRight'];
25+
List alignmentValue3 = ['bottomLeft', 'bottomCenter', 'bottomRight'];
26+
int alignmentIndex = 0;
27+
String showText = 'topLeft';
28+
29+
@override
30+
Widget build(BuildContext context) {
31+
return Scaffold(
32+
appBar: AppBar(title: Text('Align Demo'),),
33+
body: ListView(
34+
children: <Widget>[
35+
SizedBox(
36+
child: Text('修改alignment的值'),
37+
),
38+
Row(
39+
children: List.generate(3, (index) {
40+
return FlatButton(
41+
child: Text('${alignmentValue1[index]}', style: TextStyle(fontSize: 12.0),),
42+
onPressed: (){
43+
setState(() {
44+
alignmentIndex = index;
45+
showText = alignmentValue1[index];
46+
});
47+
},
48+
);
49+
}),
50+
),
51+
Row(
52+
children: List.generate(3, (index) {
53+
return FlatButton(
54+
child: Text('${alignmentValue2[index]}', style: TextStyle(fontSize: 12.0),),
55+
onPressed: (){
56+
setState(() {
57+
alignmentIndex = index + 3;
58+
showText = alignmentValue2[index];
59+
});
60+
},
61+
);
62+
}),
63+
),
64+
Row(
65+
children: List.generate(3, (index) {
66+
return FlatButton(
67+
child: Text('${alignmentValue3[index]}', style: TextStyle(fontSize: 11.0),),
68+
onPressed: (){
69+
setState(() {
70+
alignmentIndex = index + 6;
71+
showText = alignmentValue3[index];
72+
});
73+
},
74+
);
75+
}),
76+
),
77+
Center(
78+
child: Container(
79+
width: 200.0,
80+
height: 200.0,
81+
decoration: BoxDecoration(
82+
image: DecorationImage(
83+
image: NetworkImage('https://wx3.sinaimg.cn/large/006bllTKly1fmvmfjfn6pj30v90v9785.jpg'),
84+
fit: BoxFit.cover
85+
)
86+
),
87+
child: Align(
88+
widthFactor: 1,
89+
heightFactor: 1,
90+
alignment: alignment[alignmentIndex],
91+
child: Text(
92+
'$showText',
93+
style: TextStyle(
94+
fontSize: 30.0,
95+
color: Theme.of(context).primaryColor,
96+
fontWeight: FontWeight.bold),
97+
),
98+
),
99+
),
100+
)
101+
],
102+
),
103+
);
104+
}
105+
}
106+
```

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## **Align**
2+
>
3+
对齐控件，能将子控件向所指定的方向对齐，并根据子级的大小自行调整自己的大小
4+
5+
### 构造方法
6+
``` dart
7+
Align({
8+
Key key,
9+
this.alignment = Alignment.center,
10+
this.widthFactor,
11+
this.heightFactor,
12+
Widget child
13+
})
14+
```
15+
16+
### 属性介绍
17+
* alignment: 对齐方式，一般会使用系统默认提供的9种方式， Alignment.topLeft/topCenter/topRight/centerLeft/center/centerRight/bottomLeft/bottomCenter/bottomRight,也可以通过设置Alignment(数值，数值)来对齐,数值范围-1.0-1.0
18+
* widthFactor/heightFactor: 当widthFactor和heightFactor为null的时候，Align会调整到child的尺寸,当widthFactor或者heightFactor不为null的时候，Aligin会根据factor属性，扩展自己的尺寸，例如设置widthFactor为2.0的时候，那么，Align的宽度将会是child的两倍
19+
* child: Align中的内容widget

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
### Column
22

3-
```
3+
``` dart
44
import 'package:flutter/material.dart';
55
66
class Index extends StatefulWidget {
@@ -111,7 +111,7 @@ class _IndexState extends State<Index> {
111111
```
112112

113113
### Column Expanded
114-
```
114+
``` dart
115115
import 'package:flutter/material.dart';
116116
117117
class Index extends StatelessWidget {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Column是一个将其child显示在竖直方向的widget
66
* Column将其child填充在可用的竖直空间，默认竖直空间无法滚动，如有很多children，竖直方向空间饱和无法放置，请考虑使用ListView，可在没有足够空间中滚动
77

88
### 构造方法
9-
```
9+
``` dart
1010
Column({
1111
Key key,
1212
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
一个常用的widget，它结合了常见的绘画，定位和大小调整
55

66
### 构造方法
7-
```
7+
``` dart
88
Container({
99
Key key,
1010
this.alignment,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Container + padding = Padding
66

77
### 构造方法
8-
```
8+
``` dart
99
Padding({
1010
Key key,
1111
@required this.padding,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
### Row
2-
```
2+
``` dart
33
import 'package:flutter/material.dart';
44
55
class Index extends StatefulWidget {
@@ -103,7 +103,7 @@ class _IndexState extends State<Index> {
103103
```
104104

105105
### Row Expanded
106-
```
106+
``` dart
107107
import 'package:flutter/material.dart';
108108
109109
class Index extends StatefulWidget {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
Row是一个将其child显示在水平方向的widget
55

66
### 构造方法
7-
```
7+
``` dart
88
Row({
99
Key key,
1010
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,

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

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
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 alignment = [
10+
Alignment.topLeft,
11+
Alignment.topCenter,
12+
Alignment.topRight,
13+
Alignment.centerLeft,
14+
Alignment.center,
15+
Alignment.centerRight,
16+
Alignment.bottomLeft,
17+
Alignment.bottomCenter,
18+
Alignment.bottomRight
19+
];
20+
List alignmentValue1 = ['topLeft', 'topCenter', 'topRight'];
21+
List alignmentValue2 = ['centerLeft', 'center', 'centerRight'];
22+
List alignmentValue3 = ['bottomLeft', 'bottomCenter', 'bottomRight'];
23+
int alignmentIndex = 0;
24+
String showText = 'topLeft';
25+
26+
@override
27+
Widget build(BuildContext context) {
28+
return Scaffold(
29+
appBar: AppBar(title: Text('Align Demo'),),
30+
body: ListView(
31+
children: <Widget>[
32+
SizedBox(
33+
child: Text('修改alignment的值'),
34+
),
35+
Row(
36+
children: List.generate(3, (index) {
37+
return FlatButton(
38+
child: Text('${alignmentValue1[index]}', style: TextStyle(fontSize: 12.0),),
39+
onPressed: (){
40+
setState(() {
41+
alignmentIndex = index;
42+
showText = alignmentValue1[index];
43+
});
44+
},
45+
);
46+
}),
47+
),
48+
Row(
49+
children: List.generate(3, (index) {
50+
return FlatButton(
51+
child: Text('${alignmentValue2[index]}', style: TextStyle(fontSize: 12.0),),
52+
onPressed: (){
53+
setState(() {
54+
alignmentIndex = index + 3;
55+
showText = alignmentValue2[index];
56+
});
57+
},
58+
);
59+
}),
60+
),
61+
Row(
62+
children: List.generate(3, (index) {
63+
return FlatButton(
64+
child: Text('${alignmentValue3[index]}', style: TextStyle(fontSize: 11.0),),
65+
onPressed: (){
66+
setState(() {
67+
alignmentIndex = index + 6;
68+
showText = alignmentValue3[index];
69+
});
70+
},
71+
);
72+
}),
73+
),
74+
Center(
75+
child: Container(
76+
width: 200.0,
77+
height: 200.0,
78+
decoration: BoxDecoration(
79+
image: DecorationImage(
80+
image: NetworkImage('https://wx3.sinaimg.cn/large/006bllTKly1fmvmfjfn6pj30v90v9785.jpg'),
81+
fit: BoxFit.cover
82+
)
83+
),
84+
child: Align(
85+
widthFactor: 1,
86+
heightFactor: 1,
87+
alignment: alignment[alignmentIndex],
88+
child: Text(
89+
'$showText',
90+
style: TextStyle(
91+
fontSize: 30.0,
92+
color: Theme.of(context).primaryColor,
93+
fontWeight: FontWeight.bold),
94+
),
95+
),
96+
),
97+
)
98+
],
99+
),
100+
);
101+
}
102+
}

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

Lines changed: 10 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,29 @@
11
import 'package:flutter/material.dart';
22
import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
3-
import 'package:efox_flutter/utils/file.dart' as FileUtils;
4-
5-
String originCodeUrl = '';
6-
String codeUrl = 'docs/widget/regular/align/code.md';
7-
String mdUrl = 'docs/widget/regular/align/index.md';
3+
import 'demo.dart' as Demo;
84

95
class Index extends StatefulWidget {
106
static String name = 'Align';
117
static String routerName = 'align';
8+
static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/Align-class.html';
9+
static String codeUrl = 'docs/widget/regular/align/code.md';
10+
static String mdUrl = 'docs/widget/regular/align/index.md';
1211

1312
@override
1413
_IndexState createState() => _IndexState();
1514
}
1615

1716
class _IndexState extends State<Index> {
18-
bool loading = true;
19-
String ___MD___ = mdUrl;
20-
21-
@override
22-
void initState() {
23-
// TODO: implement initState
24-
super.initState();
25-
this.initMd();
26-
}
27-
28-
initMd () async {
29-
String mdStr = await FileUtils.readLocaleFile(___MD___);
30-
setState(() {
31-
this.___MD___ = mdStr;
32-
loading = false;
33-
});
34-
}
3517
@override
3618
Widget build(BuildContext context) {
3719
return WidgetComp.Index(
3820
name: Index.name,
39-
codeUrl: codeUrl,
40-
originCodeUrl: originCodeUrl,
41-
mdUrl: mdUrl,
42-
modelChild: (context, child, model) {
43-
return [
44-
___MD___
45-
];
46-
},
47-
demoChild: <Widget>[],
21+
codeUrl: Index.codeUrl,
22+
originCodeUrl: Index.originCodeUrl,
23+
mdUrl: Index.mdUrl,
24+
demoChild: <Widget>[
25+
Demo.Index()
26+
],
4827
);
4928
}
5029
}

0 commit comments

Comments
 (0)