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：简单使用：

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

</