flutter學習--佈局

Row水平佈局

不靈活水平佈局

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
      
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向佈局'),
          ),
          body:new Row(
            children: <Widget>[
              new RaisedButton(
                onPressed: (){
                  
                },
                color:Colors.redAccent,
                child:new Text('紅色按鈕')
              ),
              new RaisedButton(
                onPressed: (){
               
                },
                color:Colors.orangeAccent,
                child: new Text('黃色按鈕'),
              ),  
              new RaisedButton(
                onPressed: (){
                 
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按鈕')
              )
            ],
          )
        ),
      );
  }
}

頁面已經有了三個按鈕，但這三個按鈕並沒有充滿一行，而是出現了空隙。這就是不靈活橫向排列造成的。它根據子元素的大小來進行排列。

靈活水平佈局

解決上面有空隙的問題，可以使用 Expanded來進行解決，也就是我們說的靈活佈局。我們在按鈕的外邊加入Expanded就可以了，代碼如下：

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
      
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('水平方向佈局'),
          ),
          body:new Row(
            children: <Widget>[
              Expanded(child:new RaisedButton(
                onPressed: (){         
                },
                color:Colors.redAccent,
                child:new Text('紅色按鈕')
              )),
              Expanded(child:new RaisedButton(
                onPressed: (){
                  },
                  color:Colors.orangeAccent,
                  child: new Text('黃色按鈕'),
                )
              
              ),
              Expanded(child:new RaisedButton(
                onPressed: (){
                },
                color:Colors.pinkAccent,
                child:new Text('粉色按鈕')
              )             
              )
            ],
          )
        ),
      );
  }
}

混合複用

import 'package:flutter/material.dart';

void main() => runApp(new MyClass());

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Row Layout"),
        ),
        body: new Row(
          children: <Widget>[
            new RaisedButton(
                onPressed: () {},
                color: Colors.black,
                child: Text("黑色按鈕",style: TextStyle(color: Colors.white),),
              ),
            Expanded(
                child: new RaisedButton(
              onPressed: () {},
              color: Colors.red,
              child: Text("紅色按鈕"),
            )),
            new RaisedButton(
              onPressed: () {},
              color: Colors.yellow,
              child: Text("黃色按鈕"),
            )
          ],
        ),
      ),
    );
  }
}

Column垂直佈局

import 'package:flutter/material.dart';

void main()=>runApp(new MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Column 垂直佈局"),
        ),
        body: new Column(
          children: <Widget>[
//            new RaisedButton(onPressed: ()=>{},color: Colors.red,),
//            new RaisedButton(onPressed: ()=>{},color: Colors.black,),
//            new RaisedButton(onPressed: ()=>{},color: Colors.yellow,),
            Text('I am JSPang'),
            Text('my website is jspang.com'),
            Text('I love coding')
          ],
          crossAxisAlignment: CrossAxisAlignment.start,//居左對齊
        ),
      ),
    );
  }
}

左對齊只要在column組件下加入下面的代碼，就可以讓文字左對齊。

• CrossAxisAlignment.star：居左對齊。
• CrossAxisAlignment.end：居右對齊。
• CrossAxisAlignment.center：居中對齊。

主軸和副軸的辨識

在設置對齊方式的時候你會發現右mainAxisAlignment屬性，意思就是主軸對齊方式，那什麼是主軸，什麼又是幅軸那。

main軸：如果你用column組件，那垂直就是主軸，如果你用Row組件，那水平就是主軸。

cross軸：cross軸我們稱爲幅軸，是和主軸垂直的方向。比如Row組件，那垂直就是幅軸，Column組件的幅軸就是水平方向的。

主軸和幅軸我們搞清楚，才能在實際工作中隨心所欲的進行佈局。

mainAxisAlignment: MainAxisAlignment.center,

水平方向相對屏幕居中

讓文字相對於水平方向居中，我們如何處理？其實只要加入Center組件就可以輕鬆解決。

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'ListView widget',
        
        home:Scaffold(
          appBar:new AppBar(
            title:new Text('垂直方向佈局'),
          ),
          body:Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
             Center(child:Text('I am JSPang')),
             Center(child:Text('my website is jspang.com')),
             Center(child:Text('I love coding'))
            ],
          )
        ),
      );
  }
}

Expanded屬性的使用

其實在學習水平佈局的時候我們對Expanded有了深刻的理解，它就是靈活佈局。比如我們想讓中間區域變大，而頭部區域和底部根據文字所佔空間進行顯示。

body:Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(child:Text('I am JSPang')),
    Expanded(child:Center(child:Text('my website is jspang.com'))),
    Center(child:Text('I love coding'))
  ],
)

Stack層疊佈局

在頭像上方再放入一個容器，容器裏邊寫上字，這時候我們就可以使用Stack佈局.

層疊佈局的 alignment 屬性

alignment屬性是控制層疊的位置的，建議在兩個內容進行層疊時使用。它有兩個值X軸距離和Y軸距離，值是從0到1的，都是從上層容器的左上角開始算起的

CircleAvatar組件的使用

CircleAvatar這個經常用來作頭像的，組件裏邊有個radius的值可以設置圖片的弧度。
現在我們準備放入一個圖像，然後把弧度設置成100，形成一個漂亮的圓形，代碼如下：

new CircleAvatar(
  backgroundImage: new NetworkImage('http://jspang.com/static//myimg/blogtouxiang.jpg'),
  radius: 100.0,
),

完整代碼：

import 'package:flutter/material.dart';

void main() => runApp(new MyClass());

class MyClass extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    var stack = new Stack(
      alignment: const FractionalOffset(0.5, 0.8),
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
          radius: 100.0,
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.lightBlue,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text("pggpg"),
        )
      ],
    );
    return new MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Row Layout"),
        ),
        body:Center(
          child: stack,
        )
      ),
    );
  }
}

Positioned組件的屬性

• bottom: 距離層疊組件下邊的距離
• left：距離層疊組件左邊的距離
• top：距離層疊組件上邊的距離
• right：距離層疊組件右邊的距離
• width: 層疊定位組件的寬度
• height: 層疊定位組件的高度

var stack = new Stack(
      children: <Widget>[
        CircleAvatar(
          backgroundImage: NetworkImage("https://i2.hdslb.com/bfs/face/0cca7e53848ebd079e1b55fde929a473a882ee7f.jpg"),
          radius: 100.0,
        ),
        Positioned(child: Text("pggpg"),top: 150.0,left: 50.0,),
        Positioned(child: Text("胖哥哥飄過"),top: 20.0,left: 20.0,)
      ],
    );

卡片組件佈局

現在要開發一個類似收穫地址的列表，並且列表外部使用一個卡片式佈局。
卡片式佈局默認是撐滿整個外部容器的，如果你想設置卡片的寬高，需要在外部容器就進行制定。
使用了一個垂直佈局組件Column組件，然後利用了ListTile實現內部列表，這裏需要說明的是ListTile不光可以使用在ListView組件中，然後容器組件其實都可以使用

import 'package:flutter/material.dart';
void main () => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
    var card = new Card(
      child: Column(
        children: <Widget>[
          ListTile(
            title:new Text('吉林省吉林市昌邑區',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('胖哥哥飄過:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title:new Text('北京市海淀區中國科技大學',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('勝宏宇:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),
          ListTile(
            title:new Text('河南省濮陽市百姓辦公樓',style: TextStyle(fontWeight: FontWeight.w500),),
            subtitle: new Text('pggpg:1513938888'),
            leading: new Icon(Icons.account_box,color: Colors.lightBlue,),
          ),
          new Divider(),

        ],
      ),

    );
    return MaterialApp(
      title:'ListView widget',
      home:Scaffold(
        appBar:new AppBar(
          title:new Text('卡片佈局'),
        ),
        body:Center(child:card),
      ),
    );
  }
}