Flutter第3天--基础控件(上)，retrofit优点

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5OZ9OsW9-1637835371007)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2cc0965c62?imageView2/0/w/1280/h/960/ignore-error/1)]

body: Text(
“一箫一剑平生意，负尽狂名十五年”,
maxLines: 1,
overflow: TextOverflow.fade,
style: TextStyle(
color: Colors.blue,
fontSize: 20,
letterSpacing: 10,
fontWeight: FontWeight.bold,
background: Paint()…color = Colors.amberAccent),
),
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrangeAccent,
elevation: 12,
highlightElevation: 24,
onPressed: () {},
tooltip: ‘Increment’,
child: Icon(Icons.add,size: 40,color: Colors.white,semanticLabel:“toly”),
),

三、基础控件点将台(1)

以上6张卡片是初始项目中的控件,通过新手任务基本上更加熟悉了一些

Flutter还有哪些控件，建议看一下Flutter中文网，罗列的挺好的，下面一起学习一下
(PS:看了一下，真是多如鸡毛…吓得我不知从何入手)

所谓打蛇打七寸,擒贼先擒王,小兵之后再收拾
通过Android和html+css，我领悟到，对于界面设计者而言，布局是至关重要的,所以先看容器

1.`Layout`布局容器之`Row+Column--行+列`

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yErZ7MWc-1637835371075)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2ccd4e73df?imageView2/0/w/1280/h/960/ignore-error/1)]

1.1:Row的基础认知

---->[源码注释第一句]-----------------------------
A widget that displays its children in a horizontal array.
一个以水平数组的形式显示其子部件的Widget。

Row({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List children = const [],

1.2：基本使用

children看来是一个Widget数组，想想也不难理解，毕竟做大哥的，当然要有不少小弟啦

注：为了方便修改，以下代码把Scaffold的body属性值抽成变量使用

var row_test = Row(
children: [
Text(‘绝域从军计惘然，,’),
Text(‘东南幽恨满词笺。’),
Text(‘一箫一剑平生意，’),
Text(‘负尽狂名十五年。’),
],
);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNXMcILg-1637835371076)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d0b33f09e?imageView2/0/w/1280/h/960/ignore-error/1)]

可以看出越界有提醒，感觉蛮有心的,水平排列没毛病

1.3.Column：用法基本上差不多

---->[源码注释第一句]-----------------------------
A widget that displays its children in a vertical array.
一个以竖直数组的形式显示其子部件的Widget。

Column({
Key key,
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
MainAxisSize mainAxisSize = MainAxisSize.max,
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List children = const [],

1.4.Column基本使用

var row_column = Column(
children: [
Text(‘绝域从军计惘然，,’),
Text(‘东南幽恨满词笺。’),
Text(‘一箫一剑平生意，’),
Text(‘负尽狂名十五年。’),
],
);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pFYlyaJC-1637835371077)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2cefd6cf94?imageView2/0/w/1280/h/960/ignore-error/1)]

恭喜完成成就：`布局菜鸟`—奖励卡片：

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wtOKuTZe-1637835371436)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d11691421?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x4NWoeag-1637835371437)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2ce9fa4cd6?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ntV3bhdF-1637835371438)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2cfe2bcf22?imageView2/0/w/1280/h/960/ignore-error/1)]

恭喜解锁新卡片：Expanded，快去用用吧

Expanded意思是：使…伸展,看到下面的图,你应该就会明白

var row_test = Row(
children: [
Expanded(
child:Text(‘绝域从军计惘然，’),
),
Expanded(
child:Text(‘东南幽恨满词笺。’),
),
Expanded(
child:Text(‘一箫一剑平生意，’),
),
Expanded(
child:Text(‘负尽狂名十五年。’),
),
],
);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NoWopMQ1-1637835371078)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d19001641?imageView2/0/w/1280/h/960/ignore-error/1)]

2.`Container--容器`

可以理解为Android中的View，更像html中的div

Container是一个没有状态的控件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-flwPRodB-1637835371079)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d36dc89c8?imageView2/0/w/1280/h/960/ignore-error/1)]

2.1：源码小窥

---->[源码注释第一句]-----------------------------
A convenience widget that combines common painting, positioning, and sizing widgets.
一个方便的widget，它组合了常见的painting、positioning和sizing 控件。

Color color,
double width,
double height,
Widget this.child,
EdgeInsetsGeometry this.margin,
EdgeInsetsGeometry this.padding,
AlignmentGeometry this.alignment,
Decoration Decoration decoration,
Decoration this.foregroundDecoration,
BoxConstraints BoxConstraints constraints,
Matrix4 this.transform,

2.2：简单使用：

[插曲]这里分享一个点：当看到一个新的东西应该怎么办?

比如margin,看到EdgeInsetsGeometry我的心情是一脸懵X,不应该是数字吗?
进源码：abstract class EdgeInsetsGeometry {,抽象的，找他儿子去，
AndroidStudio中按Ctrl+H可以查看继承树，然后就看到了EdgeInsets.fromLTRB
这样Flutter的margin就和你的知识库中的margin进行了连接，你就会用了

class EdgeInsets extends EdgeInsetsGeometry {
const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
const EdgeInsets.all(double value)
: left = value, top = value, right = value, bottom = value;

新事物往往都与旧事物有联系,学习新事物最好快速找到它与你知识库中旧事物的联系,
联系的多少取决于你知识库中内容的多少，连接得越多，你会越快或越能掌握旧事物

var container_test = Container(
color: Color.fromARGB(100, 81, 211, 253),
height: 100,
width: 200,
child: Text(“张风捷特烈”),
margin: EdgeInsets.fromLTRB(5, 10, 15, 20),
padding: EdgeInsets.all(40),
);

padding和margin简称pm,左图是上面代码没有pm时，右图是有pm时

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D9KOad19-1637835371079)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d26e66841?imageView2/0/w/1280/h/960/ignore-error/1)]

恭喜达成成就：`Container使用者`–卡牌奖励：

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QKq5dIzw-1637835371439)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d1e31c6ba?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkZzhDfP-1637835371439)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d37c98661?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9eXAxt25-1637835371440)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d394db0f6?imageView2/0/w/1280/h/960/ignore-error/1)]

NPC:恭喜解锁两张辅助卡Padding和Center,快来测试一下吧

这两个没什么好说的，顾图思义，看图吧

var padding_test = Container(
color: Color.fromARGB(100, 81, 211, 253),
height: 150,
width: 250,
child: Padding(
padding: EdgeInsets.all(10),
child: Text(“张风捷特烈”),
),
);

var center_test = Container(
color: Color.fromARGB(100, 81, 211, 253),
height: 150,
width: 250,
child: Center(
child: Text(“张风捷特烈”),
),
);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJNgZHkT-1637835371080)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d3a0a41ad?imageView2/0/w/1280/h/960/ignore-error/1)]

3.`Stack -- 堆叠`

第一反应:栈?有道了一下，有堆叠的意思

---->[源码注释第一句]-----------------------------
A widget that positions its children relative to the edges of its box.
一个相对于它的框的边缘来定位它的子部件的Widget。

this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List children = const [],

触发新手任务3，并触发局部Widget树，系统赠送卡牌：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0zPM01aU-1637835371081)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d42ddec4a?imageView2/0/w/1280/h/960/ignore-error/1)]

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QGxDOG6j-1637835371441)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d5a99d007?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j3AKuYPA-1637835371441)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d5b4d65f6?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0eVXflm-1637835371442)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d4bb2c88e?imageView2/0/w/1280/h/960/ignore-error/1)]

请完成下面布局：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZewVUhM8-1637835371081)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d5fbfa44a?imageView2/0/w/1280/h/960/ignore-error/1)]

var stack_test = Container(
color: Color.fromARGB(100, 81, 211, 253),
height: 150,
width: 250,
child: Stack(
alignment: Alignment.centerLeft,
children: [
Text(‘绝域从军计惘然，,’),
Align(
alignment: Alignment.topRight,
widthFactor: 1.5,
child: Card(
elevation: 10, color: Color(0xffffffff), child: Text(‘东南幽恨满词笺。’)),
),
Text(‘一箫一剑平生意，’),
Text(‘负尽狂名十五年。’),
],
));

现在对Stack有点感觉了吧，它像FramLayout一样会叠合控件,

并且alignment还可以确定Stack自身相对于老爸的位置
Align也有alignment,不过能有一个孩子，Card我最喜欢了
这里mark一下Card里的ShapeBorder shape,源码粗略看了一下，可能挺好玩，今天主看控件

4.`IndexedStack--定索引显示`

按照索引来显示堆叠容器中的控件，挺好玩的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-czn1vzbI-1637835371082)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d6226e48c?imageView2/0/w/1280/h/960/ignore-error/1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-npkCHq0l-1637835371082)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d631048ad?imageView2/0/w/1280/h/960/ignore-error/1)]

var index_stack_test = Container(
color: Color.fromARGB(100, 81, 211, 253),
height: 150,
width: 250,
child: IndexedStack(
index:3,
alignment: Alignment.centerLeft,
children: [
Text(‘绝域从军计惘然，’),
Align(
alignment: Alignment.topRight,
widthFactor: 1.5,
child: Card(
elevation: 10, color: Color(0xffffffff), child: Text(‘东南幽恨满词笺。’)),
),
Text(‘一箫一剑平生意，’),
Text(‘负尽狂名十五年。’),
],
));

5.`Transform--变换`

transform属性的Matrix4有机会肯定好好分析分析，mark一下

Matrix4.rotationZ传入的是弧度制的度数，佩服佩服

Transform(
origin: Offset(0, 150),
transform: Matrix4.rotationZ(3.1415 / 4),
child: //同上面的Container，挺长的，不贴了
)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pF6eaNza-1637835371083)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d74447950?imageView2/0/w/1280/h/960/ignore-error/1)]

6.`Offstage--显隐控制`

把负尽狂名十五年用Offstage包裹一下，offstage为true–隐藏，为false–显示

感觉应该挺好用，简洁，明了，人狠话不多。

Offstage(
offstage: false,
child: Text(‘负尽狂名十五年。’),
),

恭喜获得成就：`布局小新手` ：奖励卡牌：

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m2rbTUEs-1637835371442)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d8015e09e?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbm4xfHD-1637835371443)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d8bc32922?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BU9hUjHa-1637835371443)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d7d95e5ef?imageView2/0/w/1280/h/960/ignore-error/1)]

三、基础控件点将台之–三大战力

隐藏剧情触发：

NPC：传说有三条恶龙盘踞在布局深处，为祸人间，勇士们，准备好了吗?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNjo89kp-1637835371083)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d96057489?imageView2/0/w/1280/h/960/ignore-error/1)]

1.表格–Table

1.1：属性一览

this.children = const [],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(1.0),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,

1.2：新手任务4：完成下面表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irODA3gi-1637835371084)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d9c85a1b1?imageView2/0/w/1280/h/960/ignore-error/1)]

代码实现：

columnWidths:可以指定每列的宽度
border:边线的样式
children:通过TableRow来显示一行

var table_test = Table(
columnWidths: const <int, TableColumnWidth>{
0: FixedColumnWidth(60.0),
1: FixedColumnWidth(100.0),
2: FixedColumnWidth(100.0),
3: FixedColumnWidth(80.0),
},
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
border:
TableBorder.all(color: Color(0xff16DAF1), width: 1.0, style: BorderStyle.solid),
children: const [
TableRow(
children: [
Center(child: Text(‘姓名’)),
Center(child: Text(‘年龄’)),
Center(child: Text(‘称号’)),
Center(child: Text(‘武器’)),
],
),
TableRow(
children: [
Text(‘捷特’),
Text(‘24’),
Text(‘风神’),
Text(‘黑风剑’),
],
),
TableRow(
children: [
Text(‘巫缨’),
Text(‘23’),
Text(‘百里巫缨’),
Text(‘百里弓’),
],
),
TableRow(
children: [
Text(‘龙少’),
Text(‘23’),
Text(‘控尊’),
Text(‘控尊戒’),
],
),
],
);

2.流动容器 --Flow：

2.1：属性一览

属性很简洁,但是：FlowDelegate够熬一碗粥的

FlowDelegate @required this.delegate,
List children = const [],

2.2：新手任务5：用完Flow成下面布局

简单分析一下：随机颜色，随机长度，到尾部不够就换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-22iuMwGx-1637835371084)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2d9f53f836?imageView2/0/w/1280/h/960/ignore-error/1)]

代码实现：从网上找了一个FlowDelegate的实现类

核心就是根据位置可以自己绘制孩子的位置(吐槽:源码了竟然没有实现类,给一个也好啊…)

class MarginFlowDelegate extends FlowDelegate {
EdgeInsets _margin = EdgeInsets.zero;//成员变量_margin
MarginFlowDelegate(this._margin); //构造函数
@override//绘制孩子的方法
void paintChildren(FlowPaintingContext context) {
var offsetX = _margin.left;
var offsetY = _margin.top;
for (int i = 0; i < context.childCount; i++) {
var w = context.getChildSize(i).width + offsetX + _margin.right;
if (w < context.size.width) {
context.paintChild(i, transform: new Matrix4.translationValues(offsetX, offsetY, 0.0));
offsetX = w + _margin.left;
} else {
offsetX = _margin.left;
offsetY += context.getChildSize(i).height + _margin.top + _margin.bottom;
context.paintChild(i,transform: new Matrix4.translationValues(offsetX, offsetY, 0.0));
offsetX += context.getChildSize(i).width + _margin.left + _margin.right;
}
}
}

动态生成Widget数组(可别傻傻的cv,60个Container)

formColorList(int count) {
var random = new Random();
var li = [];

for (int i = 0; i < count; i++) {
li.add(new Container(
width: 100 * (random.nextDouble() + 0.3),
height: 30,
color: randomRGB(),
));
}
return li;
}

用起来倒是简单：

var flow_test = Flow(
delegate: MarginFlowDelegate(EdgeInsets.all(5)),
children: formColorList(60));

3.包裹–Warp

3.1：简单认识：

这东西和css的flex有九分相似，还好我flex布局玩的挺好：有兴趣的可看这里

Flow用起来麻烦很多，但可控制，灵活性更好，如果不是什么逆天改命的布局，Warp应该够了

Wrap({
Key key,
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
List children = const [],
})

direction

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JEObQple-1637835371085)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dbbac42ca?imageView2/0/w/1280/h/960/ignore-error/1)]

3.2：新手任务6-1

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WsTwTiAn-1637835371085)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dc74614a2?imageView2/0/w/1280/h/960/ignore-error/1)]

var wrap_test = Wrap(
spacing: 8.0, // 列间距
runSpacing: 4.0, //行间距
direction:Axis.vertical ,
crossAxisAlignment:WrapCrossAlignment.center,
children: formColorList(50));

3.3：新手任务6-2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zNhfjzJ2-1637835371086)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dbc149e3b?imageView2/0/w/1280/h/960/ignore-error/1)]

var wrap_test = Wrap(
spacing: 8.0, // 列间距
runSpacing: 4.0, //行间距
direction:Axis.horizontal ,
alignment:WrapAlignment.spaceBetween,
children: formColorList(50));

duang,三大战力倒下，恭喜获得称号：`布局勇士`，收获三张传说级卡片：

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-80etiBG3-1637835371443)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dc84952b2?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-67FLdUs0-1637835371444)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dc97f2cb4?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lhuyIWrA-1637835371444)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dd67a72fe?imageView2/0/w/1280/h/960/ignore-error/1)]

三、基础控件点将台之–列表

NPC:好吧，我编不下去了…大家加油!

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qJY1h9uh-1637835371086)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2dd75d3dca?imageView2/0/w/1280/h/960/ignore-error/1)]

1.老伙伴：ListView

这里先简单看一下效果，明天根据例子来详细分析具体用法

ListView,单独可以用，传入一个Widget数组，批量生产ListView.builder简洁些

ListView.builder({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
this.itemExtent,
@required IndexedWidgetBuilder itemBuilder,
int itemCount,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool addSemanticIndexes = true,
double cacheExtent,
int semanticChildCount,

竖直	水平
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Teh0u1El-1637835371445)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2de12ba90c?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6Y7OaVq-1637835371445)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2de1eafe26?imageView2/0/w/1280/h/960/ignore-error/1)]

//竖直
var list_view_test = ListView.builder(
itemCount: 20,
padding: EdgeInsets.all(8.0),
itemExtent: 60.0,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Center(child: Text(‘toly $index’)),
);
},
);

//水平
var list_view_test = ListView.builder(
itemCount: 20,
padding: EdgeInsets.all(8.0),
scrollDirection:Axis.horizontal,
itemExtent: 60.0,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Center(child: Text(‘toly $index’)),
);
},
);

2–老伙伴：GridView

GridView.count({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required int crossAxisCount,
double mainAxisSpacing = 0.0,
double crossAxisSpacing = 0.0,
double childAspectRatio = 1.0,
bool addAutomaticKeepAlives = true,
bool addRepaintBoundaries = true,
bool

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】完整内容开源分享

addSemanticIndexes = true,
double cacheExtent,
List children = const [],
int semanticChildCount,

水平GridView	竖直GridView
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIuJ43PX-1637835371446)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2def1988e5?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g36iehkw-1637835371446)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2df2df34ee?imageView2/0/w/1280/h/960/ignore-error/1)]

//竖直GridView
var grid_view_test = GridView.count(
crossAxisCount: 4,
children: List.generate(
100,
(index) {
return Card(
child: Center(child: Text(‘toly $index’)),
);
},
),
);

//水平GridView
var grid_view_test = GridView.count(
crossAxisCount: 4,
scrollDirection:Axis.horizontal,
children: List.generate(
100,
(index) {
return Card(
child: Center(child: Text(‘toly $index’)),
);
},
),
);

3.轴列容器–ListBody(我自己取的名字)

好吧，被它的名字骗了，和ListView并没有太大的关系，也就是个多孩子的容器

优点在于在指定轴上尺寸正常，另一轴上会被拉伸，见图：

A widget that arranges its children sequentially along a given axis,
forcing them to the dimension of the parent in the other axis.
一个widget，它按照给定的轴顺序排列它的子部件，并迫使它们位于另一个轴上的父轴的维度。

ListBody({
Key key,
this.mainAxis = Axis.vertical,
this.reverse = false,
List children = const [],

水平定	竖直定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LVLILIr4-1637835371447)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2df9c3dd5a?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U8nTtbml-1637835371447)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2df3319354?imageView2/0/w/1280/h/960/ignore-error/1)]

//竖直定
var list_body_test = Column(
children: [
ListBody(
mainAxis: Axis.vertical,
reverse: false,
children: formColorList(5)
)],
);

//水平定
var list_body_test = Row(
children: [
ListBody(
mainAxis: Axis.horizontal,
reverse: false,
children: formColorList(5)
)],
);

好了，又到三局一度的发卡时间了

未精炼的传说级卡片，更多属性加成，战士们，去精炼吧

-	-	-
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7UV5AneR-1637835371448)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e0a830da5?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2ppwVN9P-1637835371448)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e15f9c793?imageView2/0/w/1280/h/960/ignore-error/1)]	[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5NqTJx5o-1637835371453)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e1b6e30c6?imageView2/0/w/1280/h/960/ignore-error/1)]

四、容器扫个尾：

1.Baseline

将文字按照基线对齐(因为比较好看)–baseline越大，距离顶端越远

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-86SOBdvi-1637835371087)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e1de3b224?imageView2/0/w/1280/h/960/ignore-error/1)]

const Baseline({
Key key,
@required this.baseline,
@required this.baselineType,
Widget child

formTextList(int count) {
var random = new Random();
var li = [];

for (int i = 0; i < count; i++) {
li.add(new Baseline(
baselineType: TextBaseline.alphabetic,
child: new Text(‘Toly’,
style: new TextStyle(
fontSize: 20.0 + random.nextInt(40),
textBaseline: TextBaseline.alphabetic,
),
),
baseline: 80,
));
}
return li;
}

var base_line_test = new Row(
children: formTextList(5),
);

2.FractionallySizedBox

这个挺有意思，儿子随爷爷，父亲(FractionallySizedBox)中间倒把手

可以实现爷爷和孙子之间的尺寸比例联系

const FractionallySizedBox({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SZQ4xoh1-1637835371087)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e203213a0?imageView2/0/w/1280/h/960/ignore-error/1)]

var fsb_test = new Container(
color: Colors.blue,
height: 150.0,
width: 150.0,
child: new FractionallySizedBox(
alignment: Alignment.bottomCenter,
widthFactor: 1.5,
heightFactor: 0.5,
child: new Container(
color: Colors.red,
),
),
);

3.AspectRatio

就是设定一个定比例的容器width/height=aspectRatio

const AspectRatio({
Key key,
@required this.aspectRatio,
Widget child

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jwAbLNt1-1637835371088)(https://user-gold-cdn.xitu.io/2018/12/18/167c0f2e34e14c1d?imageView2/0/w/1280/h/960/ignore-error/1)]

eline.alphabetic,
),
),
baseline: 80,
));
}
return li;
}