Today mainly engaged in the page layout on it
After a half-hour work
Let us talk about contrast flutter and Android controls
a Starting
in Android View is the basis of all the controls, with the Flutter View is equivalent Widget. Widget but also different from Android in the views. In Flutter you can declare a constructor interface.
Flutter of control can not be modified until they need to be changed. when the status is changed, the underlying Flutter will re-create a new instance of the control tree. the controls are drawn in Android once it is no longer drawn until invalidate is called .
because it is lightweight immutability, Flutter controls because they do not view itself, nor is it drawn directly anything, but to describe the semantics of the UI and eventually will be configured to attempt an actual object.
two. Android controls
common underlying control View, TextView, Button, ImageView, other controls such as ProgressBar, SeekBar etc.
these controls are inherited from View. when the underlying control is not enough, inheritable characteristics of these controls to achieve what you want.
There are five basic layout in android
Linear layout (the LinearLayout)
relative layout (the RelativeLayout)
table layout (the TableLayout)
frame layout (the FrameLayout)
absolute layout (AbsoluteLayout)
TableLayout AbsoluteLayout and I basically did not use. LinearLayout layout for one horizontal line or vertical line.
FrameLayout for layout hierarchical interface, you can simply set centered relative relationship between the use of more complex controls RelativeLayout layout.
FrameLayout performance will be better than RelativeLayout when FrameLayout can not be solved only with the RelativeLayout
the RelativeLayout by a relative relationship can layout the LinearLayout interface, but not as LinearLayout visual
list of the sliding arrangement ScrollView / ListView / GridView / RecyclerView / ViewPager.
above control extends ViewGroup, ViewGroup and Inheritance in View relative to inherit View controls, internal former can contain child controls, the latter not the former general will be achieved onLayout and onMeasure, to the layout and size of the control sub-control. when these layouts is not enough, but also inherit these controls to realize their wish characteristics want.
All of the above controls have properties there
Width (layout_width)
Height (layout_height)
Background (backgroud)
the spacing (padding)
outside the pitch (margin)
visibility (visibility)
located in the parent control position (layout_gravity)
position inside the child controls (gravity, have inherited from the ViewGroup)
click on the event (onClick)
animation properties (alpha / rotation / scale)
Three. Flutter controls
flutter very much in control, each layout only with specific characteristics. Functional division is very fine. The biggest difference is precisely this point, the basic controls no longer have common attributes, such as background, click on events , these are as a separate independent control.
Here is a simple example is as follows
Android example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:onClick="xxx"
android:gravity="center"
android:text="按钮"
android:textSize="18sp"
android:textColor="0xffffffff"
android:layout_width="100dp"
android:layout_height="40dp"
android:background="0xff808080"/>
</LinearLayout>
Flutter examples
var layout = Column(
children: <Widget>[
GestureDetector(
child: Container(
width: 100.0,
height: 40.0,
color: Color(0xff808080),
child: Center (
child: Text(
'按钮',
style: TextStyle(
color: Color(0xffffffff),
fontSize: 18.0,
),
),
)
),
onTap: () {
print('clicked');
},
),
],
);
Flutter can be seen, the properties are extracted as a control of, GestureDetector responsible for handling the click event, Container responsible for the size and background, Center responsible for the center .Text with only text-related properties, such a simple control Android Flutter in need nested many layers can be achieved. but the advantage is very small division, in any combination.
the basic display controls are Text, Image, Icon, RaisedButton etc. property function controls are Container, Padding, Center, Align, FittedBox , etc. these are Single-child is control. attribute child is directed to the Widget.
layout control has Row, Column, Stack, IndexedStack, GridView, ListView , etc. these are all Multi-child control. attribute child is directed to <Widget> [].
IV. implement custom controls
in Android is usually inherited View View-based or other controls. then override these methods, to obtain the desired behavior.
in Flutter, you only need a combination of various widgets rather than inheritance. some to achieve a similar degree Android custom ViewGroup. the various components of units already exist, you simply provide a different Behavior, such as redefining the layout logic.
For example: you want to achieve CustomButton get a text at the time of construction you can RaisedButton combination of text, instead of inheriting RaisedButton..
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {}, child: Text(label));
}
}
Then use CustomButton like Flutter with other components of the same:
@override
Widget build(BuildContext context) {
return Center(
child: CustomButton("Hello"),
);
}
Five. Android / Flutter map
Android|Flutter
---|---:
TextView|Text
ImageView|Image
Button|RaisedButton
LinearLayout|Row/Column
FrameLayout/RelativeLayout|Stack
ListView|ListView
GridView|GridView
ViewPager|PageView
After two hours work
This is a picture on the inside of my layout layout for half an hour (0_0)
Tete meow embarrassment (no way just learning to continue filling it)
layout code as follows
Widget message = new Container(
margin: const EdgeInsets.only(left: 20,top: 30,right: 20),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Image.network("https://upload.jianshu.io/users/upload_avatars/3753079/ae1e9a5b-1c4f-43c1-83d3-bbc9fcb2f734.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96",
width:75,height: 75,fit: BoxFit.cover,),
new Container(
margin: const EdgeInsets.only(left: 15.0),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text("这里是名字"),
new Container(margin:const EdgeInsets.only(top: 8),
child: new Text("这里是信息"),
)
],
),
),
],
),
new Container(child: new Image.asset("images/jiantou.png",width: 5,height: 9,),
alignment: Alignment.bottomCenter,
)
],
),
);
And after half an hour
Column thirdButton(String path,String label){
Color color = Colors.black;
return new Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image.asset(path,width: 21,height: 21,),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(label,
style: new TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
color: color
),
),
)
],
);
}
Widget button = new Container(
margin: const EdgeInsets.only(top: 30),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround ,
children: <Widget>[
thirdButton("images/email.png", "支部书记信箱"),
thirdButton("images/follower.png", "收藏"),
thirdButton("images/hoat_line.png", "在线交流")
],
)
);
It took a long time to 0.0 have forgotten to write the book Jane
At the moment nothing is written in a list and then use a different form of writing out
that it could have been combined into a control is split out and then use the value to determine whether a control code stickers I like
/**
* isShow 是否显示分割线
*/
Container creatList(String label,bool isShow){
Widget w = new Container(
margin: const EdgeInsets.only(top: 15,bottom: 15),
child: new Text(label,
style: new TextStyle(
fontSize: 13.0
),
),
);
Widget d = new Container(
padding: const EdgeInsets.only(top: 1),
color: value.defultColor,
);
List<Widget> ws = new List();
ws.add(w);
if(isShow) ws.add(d);
Container container = new Container(
margin: const EdgeInsets.only(left: 20),
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: ws
)
);
return container;
}
Widget list = new Container(
margin: const EdgeInsets.only(top: 16),
color: Colors.white,
child: new Column(
children: <Widget>[
creatList("我的信息", true),
creatList("平台反馈", true),
creatList("密码修改", true)
],
),
);
Am used parameters and functions (also of no use, but there are associated)
Row,Column->MainAxisAlignment
MainAxisAlignment.spaceBetween //假设有1-2-3三个图片,居中，左边到1的间距，3到右边的间距为0，1-2,2-3之间间距相同
MainAxisAlignment.spaceAround //假设有1-2-3三个图片,居中，1-2,2-3之间间距相同，且左边到1的间距，3到右边的间距的一半
MainAxisAlignment.spaceEvenly //假设有1-2-3三个图片，居中，图片间距等值分配
MainAxisAlignment.start //假设有1-2-3三个图片,居中及靠左，图片间距为0
MainAxisAlignment.end //假设有1-2-3三个图片,居中及靠右，图片间距为0
MainAxisAlignment.center //假设有1-2-3三个图片,居中，图片间距为0
new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center, //需要依赖外层的Center，否则不生效
children: <Widget>[
new Text("you click:"),
new Text('$count'),
],),
),
垂直方向
Row,Column->CrossAxisAlignment
CrossAxisAlignment.start //假设有1-2-3三个图片,靠左及顶部，图片间距为0
CrossAxisAlignment.end //假设有1-2-3三个图片,靠左及底部，图片间距为0
CrossAxisAlignment.center //假设有1-2-3三个图片,居中及靠左，图片间距为0
水平方向
Container -> alignment (alignment)
Alignment.topLeft //假设一张图片,在一个比图大的布局里，则在布局里，靠左及顶部排列
Alignment.topCenter //假设一张图片,在一个比图大的布局里，则在布局里，居中及顶部排列
Alignment.topRight //假设一张图片,在一个比图大的布局里，则在布局里，靠右及顶部排列
Previous --------------------------------------------- next piece