今日は主にその上にページレイアウトに従事します
半時間の作業の後
私たちは、コントラストフラッターについてお話しましょうとAndroidは、制御
開始
フラッタービューが同等のウィジェット。ウィジェットですが、ビュー内のAndroidとも異なると、Androidのビューでは、すべてのコントロールの基本である。フラッターであなたは、コンストラクタを宣言することができますインターフェース。
彼らは変更する必要があるまで、コントロールのフラッターは、ステータスが変更されたときに、基礎となるフラッターがコントロールツリーの新しいインスタンスを再作成します。変更することはできません。無効化が呼び出されるまで、それはもはや引かれたら、コントロールがアンドロイドで描かれていません。
それは軽量不変であるため、彼らは自分自身を見ていない、またそれは直接何も描かれているが、UIの意味を記述するために、最終的に実際のオブジェクトを試みるように設定されるため、フラッターが制御されます。
2。アンドロイドのコントロール
共通基盤となる制御ビュー、TextViewに、ボタン、ImageViewのは、そのようシークバーなどのProgressBarなどの他のコントロールが
根底にあるコントロールは、あなたが望むものを達成するために、十分にこれらのコントロールの継承可能な特性ではないときに、これらのコントロールは。見るから継承されています。
5つの基本的なレイアウトは、アンドロイドにあります
線形レイアウト（のLinearLayout）
相対レイアウト（RelativeLayout）
テーブルレイアウト（TableLayout）
フレームレイアウト（でframeLayout）
絶対配置（AbsoluteLayout）
TableLayout AbsoluteLayoutと、私は基本的に使用していませんでした。1つの水平ラインまたは垂直線用のLinearLayoutのレイアウトを。
でframeLayoutレイアウト階層インタフェースのために、あなたは、単にレイアウトRelativeLayout、より複雑なコントロールの使用との間を中心と相対的な関係を設定することができます。
でframeLayout性能はRelativeLayoutより良くなりますでframeLayoutはRelativeLayoutのみでは解決できない場合
のLinearLayoutインタフェースをレイアウトすることができるが、相対関係によってRelativeLayoutないのLinearLayoutビジュアルとして
スライディング配置ScrollViewのリスト/リストビュー/ GridViewの/ RecyclerView / ViewPager。
制御が延びている上方のViewGroup、のViewGroupと継承前者は子コントロールを含めることができ、内部ビューコントロールを継承するビューの相対的で、後者ではない元ゼネラルは、制御サブコントロールのレイアウトとサイズに、onLayoutとonMeasureを達成されます。これらのレイアウトは十分ではありませんが、また、彼らの願いを実現するために、これらのコントロールを継承する場合特性が欲しい
上記のすべてのコントロールがある性質を持っています
幅（layout_width）
高さ（layout_height）
背景（backgroudの）
間隔（パディング）
ピッチ（マージン）外部
可視（可視）
親制御位置（layout_gravity）に位置
子コントロール内の位置（重心、のViewGroupから継承しています）
イベントをクリックしてください（onClickの）
アニメーションプロパティ（アルファ/回転/スケール）
三。フラッターコントロールは
、特定の特性を持つだけで、コントロールに各レイアウトを非常に多くのフラッターない。機能部門は非常に細かいです。最大の違いは、まさにこの時点で、基本的なコントロールは、もはやこのような背景などの共通の属性を持つ、イベントをクリックしてください、これらは、別個の独立した制御の通りである。
ここでは簡単な例である以下の通りである
Androidの例
<?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>
フラッター例
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');
},
),
],
);
フラッターが必要で、テキストのみに関連するプロパティを持つ中央の.textの責任センター、大きさや背景のコンテナが担当し、プロパティをクリックイベントを処理するための責任GestureDetectorのコントロールとして抽出され、このような単純な制御のAndroidフラッタを見ることができますネストされた多くの層を達成することができる。しかし、利点は、任意の組み合わせで、非常に小さな部門です。
基本的な表示のコントロールがRaisedButtonなどの特性機能を制御しているコンテナ、パディング、センター、揃え、テキスト、画像、アイコン、ある FittedBox 、などこれらはシングル子供はコントロールです。子供はウィジェット。対象とする属性を
持っている行、列、スタック、IndexedStack、レイアウトコントロールのGridView、ListViewコントロールこれらはすべてマルチ子コントロールしている、など。子供が<ウィジェット> []。を対象とする属性
IV。カスタムコントロールを実装する
Androidの通常ビュービューベースまたは他のコントロールを継承している。その後、目的の動作を取得するために、これらのメソッドをオーバーライドします。
フラッターで、あなただけのさまざまなウィジェットではなく、継承の組み合わせを必要としています。いくつかの同程度のAndroidカスタムのViewGroupを達成する。単位のさまざまなコンポーネントが既に存在して、あなたは単に別のを提供します そのようなレイアウトロジックを再定義など、行動、
たとえば：あなたはCustomButtonにすることができます構築時にテキストRaisedButtonテキストの組み合わせを取得達成したいのではなく、RaisedButtonを継承。..
class CustomButton extends StatelessWidget {
final String label;
CustomButton(this.label);
@override
Widget build(BuildContext context) {
return RaisedButton(onPressed: () {}, child: Text(label));
}
}
その後、同じの他の成分とフラッターのようなCustomButtonを使用します。
@override
Widget build(BuildContext context) {
return Center(
child: CustomButton("Hello"),
);
}
ファイブ。アンドロイド/フラッタマップ
Android|Flutter
---|---:
TextView|Text
ImageView|Image
Button|RaisedButton
LinearLayout|Row/Column
FrameLayout/RelativeLayout|Stack
ListView|ListView
GridView|GridView
ViewPager|PageView
2時間の作業後
これは、半分の時間のための私のレイアウトのレイアウトの内側に絵（0_0）である
テテニャー恥ずかし（手立てはそれを埋め続けることを学ぶん）
、次のようにレイアウトコード
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,
)
],
),
);
時間半後
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", "在线交流")
],
)
);
これは、0.0に長い時間がかかった書籍ジェーンを書くのを忘れています
現時点では何もリストに書かれていないし、次に書き出しの異なる形式を使用している
制御コードのステッカーは、私が好きかどうかを判断するために、出て分割し、その値を使用しているコントロールに統合されている可能性があることを
/**
* 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は（も役に立たないが、そこには関連している）のパラメータおよび機能を使用しました
行、カラム・> 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'),
],),
),
垂直方向
行、カラム・> CrossAxisAlignment
CrossAxisAlignment.start //假设有1-2-3三个图片,靠左及顶部，图片间距为0
CrossAxisAlignment.end //假设有1-2-3三个图片,靠左及底部，图片间距为0
CrossAxisAlignment.center //假设有1-2-3三个图片,居中及靠左，图片间距为0
水平方向
容器 - >位置合わせ（アライメント）
Alignment.topLeft //假设一张图片,在一个比图大的布局里，则在布局里，靠左及顶部排列
Alignment.topCenter //假设一张图片,在一个比图大的布局里，则在布局里，居中及顶部排列
Alignment.topRight //假设一张图片,在一个比图大的布局里，则在布局里，靠右及顶部排列