다음날 플러터

현재는 주로 그것의 페이지 레이아웃에 종사

30 분 작업 후

우리가 대비 플러터에 대해 이야기하자 안드로이드는 제어
시작
플러터보기 해당 위젯. 위젯하지만 뷰에서 안드로이드에서도 다른과, 안드로이드보기에서 모든 컨트롤의 기초이다. 플러터에서는이 생성자를 선언 할 수 있습니다 인터페이스를 제공합니다.
제어의 떨림은 그들이 변경해야 할 때까지 수정할 수 없습니다는. 상태가 변경 될 때, 기본 떨림은 제어 트리의 새로운 인스턴스를 다시 생성하지 않습니다. 컨트롤은 안드로이드에 그려 무효가 호출 될 때까지 더 이상 그려되면 .
이 가벼운 불변성을하기 때문에, 그들은 자신을 볼 수 없기 때문에 떨림은 제어 않으며 직접 아무것도 그려되지만, UI의 의미를 설명하고, 결국 실물을 시도하도록 구성됩니다.
이. 안드로이드 컨트롤을
공통 기본 제어보기는, 텍스트 뷰가 등 SeekBar를 ProgressBar를, 같은 버튼, 이미지 뷰, 다른 컨트롤은
기본 컨트롤이 충분하지 않을 때 이러한 컨트롤은보기에서 상속됩니다. 이러한 컨트롤의 상속 특성은 당신이 원하는 것을 달성하기 위해.
안드로이드의 다섯 개 가지 기본 레이아웃이 있습니다

선형 레이아웃 (의 LinearLayout)
상대적인 배치합니다 (RelativeLayout의)
테이블 레이아웃합니다 (TableLayout을)
프레임 레이아웃합니다 (FrameLayout이)
절대 배열 (AbsoluteLayout)

TableLayout을 AbsoluteLayout 나는 기본적으로 사용하지 않았다.있는 LinearLayout 레이아웃을 하나 개의 수평 라인 또는 수직 라인.
FrameLayout이를 레이아웃 계층 인터페이스를 들어, 단순히 레이아웃을 RelativeLayout의 더 복잡한 컨트롤의 사용 사이의 상대적인 관계를 중심으로 설정할 수 있습니다.
FrameLayout이 성능이 RelativeLayout의보다 더 좋을 것이다 FrameLayout이는 RelativeLayout의 만 해결 될 수 없을 때
의 LinearLayout 인터페이스 레이아웃 할 수 있지만, 상대적인 관계에 의해 RelativeLayout의하지의 LinearLayout 시각으로서
슬라이딩 배치있는 ScrollView 목록 / ListView에 /의 GridView / RecyclerView / ViewPager.
제어 연장 상기 뷰 그룹, 뷰 그룹 및 상속 보기 컨트롤을 상속보기 상대적으로 내부 전자는 전 일반이 레이아웃이 충분하지 않습니다 제어 서브 컨트롤의 레이아웃과 크기.에, onLayout과 된 onMeasure을 달성 할 것없는 후자를 자식 컨트롤을 포함 할뿐만 아니라, 자신의 소원을 실현하기 위해 이러한 컨트롤을 상속 할 수 있습니다 특성은. 원하는
위의 모든 컨트롤이 특성을 가지고

폭 (layout_width)
높이 (layout_height)
배경 (배경에서)
의 간격 (패딩)
피치 (마진) 외부에
공개 (공개)
부모 제어 위치 (layout_gravity)에있는
자식 컨트롤 내부 위치 (중력의 뷰 그룹으로부터 상속)
이벤트에서 클릭 (온 클릭)
애니메이션 속성 (알파 / 회전 / 스케일)

세 가지. 컨트롤 플러터
특정 특성, 제어에 매우 플러터 각 레이아웃을. 기능 부문은 매우 괜찮습니다. 가장 큰 차이점은 바로이 지점입니다, 기본 컨트롤이 더 이상 같은 배경으로 공통 속성을 가지고하지, 이벤트 클릭 이들은 별개로 독립적으로 제어한다.
다음은 간단한 예는 다음과 같이된다
안드로이드 예

<?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의 컨트롤로 추출, 볼 수있는, 그런 간단한 제어 안드로이드 플러터 필요 중첩 된 많은 레이어를 달성 할 수있다.하지만 장점은 임의의 조합으로, 아주 작은 부문이다.
기본 표시 컨트롤 RaisedButton 등 속성 기능 컨트롤입니다 컨테이너, 패딩, 센터, 정렬, 텍스트, 이미지, 아이콘입니다 FittedBox 등이이 싱글 아이 컨트롤입니다. 아이가 위젯.에 관한 것이다 속성을
가지고 행, 열, 스택, IndexedStack, 레이아웃 컨트롤 의 GridView, ListView에 이러한 모든 멀티 자식 컨트롤이다 등. 아이가 <위젯> [].에 관한 것이다 특성
IV. 사용자 지정 컨트롤을 구현
안드로이드는 일반적으로보기보기 기반 또는 다른 컨트롤이. 다음 원하는 동작을 얻기 위해,이 메소드를 오버라이드 (override) 상속됩니다.
떨림, 당신 만이 아니라 상속보다는 다양한 위젯의 조합이 필요합니다. 일부 비슷한 정도 안드로이드 커스텀 뷰 그룹을 달성하기. 단위의 다양한 구성 요소가 이미 존재, 당신은 단순히 다른를 제공 . 같은 레이아웃 논리를 다시 정의하는 등의 행동,
예를 들어 당신이 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

이시간 작업 후

의 image.png

이 30 분 내 레이아웃 레이아웃의 내부 사진입니다 (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,
          )
        ],
      ),
    );

그리고 반 시간 후

의 image.png

 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)
        ],
      ),
    );

오전 매개 변수와 함수를 사용 (또는 전혀 사용을하지만, 거기에 연결되어 있습니다)

행, 칼럼 -> 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   //假设一张图片,在一个比图大的布局里，则在布局里，靠右及顶部排列

이전 --------------------------------------------- 다음 조각