Skip to content

Commit ae19fd3

Browse files
DIVINER-onlyDIVINER-only
committed
column
1 parent b04150a commit ae19fd3

File tree

8 files changed

+273
-76
lines changed

8 files changed

+273
-76
lines changed

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

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
### Column
2+
3+
```
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 mainAxisAlignment = [
13+
MainAxisAlignment.start,
14+
MainAxisAlignment.center,
15+
MainAxisAlignment.end,
16+
MainAxisAlignment.spaceAround,
17+
MainAxisAlignment.spaceBetween,
18+
MainAxisAlignment.spaceEvenly
19+
];
20+
List mainValue1 = ['start', 'center', 'end'];
21+
List mainValue2 = ['Around', 'Between', 'Evenly'];
22+
int mainAxisAlignmentIndex = 0;
23+
24+
List crossAxisAlignment = [
25+
CrossAxisAlignment.start,
26+
CrossAxisAlignment.center,
27+
CrossAxisAlignment.end
28+
];
29+
List crossValue1 = ['start', 'center', 'end'];
30+
int crossAxisAlignmentIndex = 0;
31+
32+
@override
33+
Widget build(BuildContext context) {
34+
return Scaffold(
35+
appBar: AppBar(
36+
title: Text('Column Demo'),
37+
),
38+
body: ListView(
39+
children: <Widget>[
40+
SizedBox(
41+
child: Text('修改mainAxisAligment的值'),
42+
),
43+
Row(
44+
children: List.generate(3, (index) {
45+
return FlatButton(
46+
child: Text('${mainValue1[index]}'),
47+
onPressed: (){
48+
setState(() {
49+
mainAxisAlignmentIndex = index;
50+
});
51+
},
52+
);
53+
})
54+
),
55+
Row(
56+
children: List.generate(3, (index) {
57+
return FlatButton(
58+
child: Text('${mainValue2[index]}'),
59+
onPressed: (){
60+
setState(() {
61+
mainAxisAlignmentIndex = index + 3;
62+
});
63+
},
64+
);
65+
})
66+
),
67+
SizedBox(
68+
child: Text('修改crossAxisAlignment的值')
69+
),
70+
Row(
71+
children: List.generate(3, (index) {
72+
return FlatButton(
73+
child: Text('${crossValue1[index]}'),
74+
onPressed: (){
75+
setState(() {
76+
crossAxisAlignmentIndex = index;
77+
});
78+
},
79+
);
80+
})
81+
),
82+
Container(
83+
width: double.infinity,
84+
height: 450.0,
85+
color: Theme.of(context).primaryColor,
86+
child: Column(
87+
mainAxisAlignment: mainAxisAlignment[mainAxisAlignmentIndex],
88+
crossAxisAlignment: crossAxisAlignment[crossAxisAlignmentIndex],
89+
mainAxisSize: MainAxisSize.max,
90+
children: <Widget>[
91+
Image.network(
92+
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP6WANi6lLUbgVdbwxt0ADhbwPrpEa3IGMAOzgfBFMukYsmSKB',
93+
width: 100.0,
94+
),
95+
Image.network(
96+
'http://pic.ffpic.com/files/2015/0321/0321ktbdbsjbzdq1.jpg',
97+
width: 100.0,
98+
),
99+
Image.network(
100+
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzaRpH9hl6NsFdTw_c3CLTc9CCXcvH-Vo4HK8fb6asgQbaTMHJ',
101+
width: 100.0,
102+
),
103+
],
104+
),
105+
)
106+
],
107+
),
108+
);
109+
}
110+
}
111+
```
112+
113+
### Column Expanded
114+
```
115+
import 'package:flutter/material.dart';
116+
117+
class Index extends StatelessWidget {
118+
@override
119+
Widget build(BuildContext context) {
120+
return Scaffold(
121+
appBar: AppBar(title: Text('Column Expanded'),),
122+
body: Container(
123+
width: double.infinity,
124+
height: 450.0,
125+
color: Theme.of(context).primaryColor,
126+
child: Column(
127+
mainAxisAlignment: MainAxisAlignment.center,
128+
crossAxisAlignment: CrossAxisAlignment.center,
129+
mainAxisSize: MainAxisSize.max,
130+
children: <Widget>[
131+
Expanded(
132+
child: Image.network(
133+
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP6WANi6lLUbgVdbwxt0ADhbwPrpEa3IGMAOzgfBFMukYsmSKB',
134+
width: 100.0, fit: BoxFit.cover,
135+
),
136+
),
137+
Expanded(
138+
flex: 2,
139+
child: Image.network(
140+
'http://pic.ffpic.com/files/2015/0321/0321ktbdbsjbzdq1.jpg',
141+
width: 100.0, fit: BoxFit.cover,
142+
),
143+
),
144+
Expanded(
145+
child: Image.network(
146+
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzaRpH9hl6NsFdTw_c3CLTc9CCXcvH-Vo4HK8fb6asgQbaTMHJ',
147+
width: 100.0, fit: BoxFit.cover,
148+
),
149+
),
150+
151+
],
152+
),
153+
)
154+
);
155+
}
156+
}
157+
```

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

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,41 @@
1-
## **column**
1+
## **Column**
2+
3+
>
4+
Column是一个将其child显示在竖直方向的widget
5+
6+
* Column将其child填充在可用的竖直空间，默认竖直空间无法滚动，如有很多children，竖直方向空间饱和无法放置，请考虑使用ListView，可在没有足够空间中滚动
7+
8+
### 构造方法
9+
```
10+
Column({
11+
Key key,
12+
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
13+
MainAxisSize mainAxisSize = MainAxisSize.max,
14+
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
15+
TextDirection textDirection,
16+
VerticalDirection verticalDirection = VerticalDirection.down,
17+
TextBaseline textBaseline,
18+
List<Widget> children = const <Widget>[],
19+
})
20+
```
21+
22+
### 属性介绍
23+
> mainAxisAlignment 如何将child沿主轴放置在布局中
24+
* start: 将child放置在主轴的起始位置
25+
* center: 将child放置在主轴的中间
26+
* end: 将child放置在主轴的末端
27+
* spaceAround: 将自由空间放置在孩子之间，第一个和最后一个child与边界的距离是其他孩子之间的一半
28+
* spaceBetween: 将自由空间放置在孩子之间，第一个和最后一个child与边界之间没有空间
29+
* spaceEvenly: 将自由空间均匀的放置在children之间
30+
> crossAxisAlignment 如何将child沿侧轴放置在布局中
31+
* start: 将child放置在侧轴起点
32+
* center: 将child放置在侧轴的中心
33+
* end: 将child放置在侧轴的末端
34+
* stretch: 将child填充侧轴
35+
* baseline: 将child放置在侧轴上，使他们的基线匹配
36+
> mainAxisSize: 主轴应占用多少空间
37+
* max: 最大化沿主轴的可用空间量，默认值
38+
* min: 最小化沿主轴的可用空间量
39+
40+
### 高级用法
41+
> 在Column的children中使用Extanded包裹会使child沾满这个Column的宽度，使用flex可以设置对应的child占用的空间是其他child的倍数,默认flex:1

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

Lines changed: 24 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,16 @@ class _IndexState extends State<Index> {
1616
MainAxisAlignment.spaceBetween,
1717
MainAxisAlignment.spaceEvenly
1818
];
19+
List mainValue1 = ['start', 'center', 'end'];
20+
List mainValue2 = ['Around', 'Between', 'Evenly'];
1921
int mainAxisAlignmentIndex = 0;
22+
2023
List crossAxisAlignment = [
2124
CrossAxisAlignment.start,
2225
CrossAxisAlignment.center,
2326
CrossAxisAlignment.end
2427
];
28+
List crossValue1 = ['start', 'center', 'end'];
2529
int crossAxisAlignmentIndex = 0;
2630
2731
@override
@@ -37,91 +41,43 @@ class _IndexState extends State<Index> {
3741
child: Text('修改mainAxisAligment的值'),
3842
),
3943
Row(
40-
children: <Widget>[
41-
FlatButton(
42-
child: Text('start'),
43-
onPressed: (){
44-
setState(() {
45-
mainAxisAlignmentIndex = 0;
46-
});
47-
},
48-
),
49-
FlatButton(
50-
child: Text('center'),
51-
onPressed: (){
52-
setState(() {
53-
mainAxisAlignmentIndex = 1;
54-
});
55-
},
56-
),
57-
FlatButton(
58-
child: Text('end'),
44+
children: List.generate(3, (index) {
45+
return FlatButton(
46+
child: Text('${mainValue1[index]}'),
5947
onPressed: (){
6048
setState(() {
61-
mainAxisAlignmentIndex = 2;
49+
mainAxisAlignmentIndex = index;
6250
});
6351
},
64-
)
65-
],
52+
);
53+
})
6654
),
6755
Row(
68-
children: <Widget>[
69-
FlatButton(
70-
child: Text('Around'),
71-
onPressed: (){
72-
setState(() {
73-
mainAxisAlignmentIndex = 3;
74-
});
75-
},
76-
),
77-
FlatButton(
78-
child: Text('Between'),
56+
children: List.generate(3, (index) {
57+
return FlatButton(
58+
child: Text('${mainValue2[index]}'),
7959
onPressed: (){
8060
setState(() {
81-
mainAxisAlignmentIndex = 4;
61+
mainAxisAlignmentIndex = index + 3;
8262
});
8363
},
84-
),
85-
FlatButton(
86-
child: Text('Evenly'),
87-
onPressed: (){
88-
setState(() {
89-
mainAxisAlignmentIndex = 5;
90-
});
91-
},
92-
),
93-
],
64+
);
65+
})
9466
),
9567
SizedBox(
9668
child: Text('修改crossAxisAlignment的值')
9769
),
9870
Row(
99-
children: <Widget>[
100-
FlatButton(
101-
child: Text('start'),
102-
onPressed: (){
103-
setState(() {
104-
crossAxisAlignmentIndex = 0;
105-
});
106-
},
107-
),
108-
FlatButton(
109-
child: Text('center'),
110-
onPressed: (){
111-
setState(() {
112-
crossAxisAlignmentIndex = 1;
113-
});
114-
},
115-
),
116-
FlatButton(
117-
child: Text('end'),
71+
children: List.generate(3, (index) {
72+
return FlatButton(
73+
child: Text('${crossValue1[index]}'),
11874
onPressed: (){
11975
setState(() {
120-
crossAxisAlignmentIndex = 2;
76+
crossAxisAlignmentIndex = index;
12177
});
12278
},
123-
),
124-
],
79+
);
80+
})
12581
),
12682
Row(
12783
mainAxisAlignment: mainAxisAlignment[mainAxisAlignmentIndex],
@@ -144,10 +100,9 @@ class _IndexState extends State<Index> {
144100
);
145101
}
146102
}
147-
148103
```
149104

150-
### Row.Extend
105+
### Row Expanded
151106
```
152107
import 'package:flutter/material.dart';
153108
@@ -160,7 +115,7 @@ class _IndexState extends State<Index> {
160115
@override
161116
Widget build(BuildContext context) {
162117
return Scaffold(
163-
appBar: AppBar(title: Text('Row Extend'),),
118+
appBar: AppBar(title: Text('Row Expanded'),),
164119
body: Row(
165120
children: <Widget>[
166121
Expanded(

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ class _IndexState extends State<Index> {
8383
child: Column(
8484
mainAxisAlignment: mainAxisAlignment[mainAxisAlignmentIndex],
8585
crossAxisAlignment: crossAxisAlignment[crossAxisAlignmentIndex],
86+
mainAxisSize: MainAxisSize.max,
8687
children: <Widget>[
8788
Image.network(
8889
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSP6WANi6lLUbgVdbwxt0ADhbwPrpEa3IGMAOzgfBFMukYsmSKB',

0 commit comments

Comments
 (0)