flutter界面布局-以及Tabbar的封裝

在講布局之前先說說獲取屏幕寬高的方法:

     final size =MediaQuery.of(context).size;
    final width =size.width;
    final height =size.height;

布局

1. 水平布局

/** 
 * 
 * 自定義組件的水平布局-- Row
 * 
*/

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

    // TODO: implement build
    return Container(
      color: Color.fromRGBO(233, 233, 233, 1.0),
      height: 600,
      width: 400,
      child: Row(
        // 子控件所在父控件的布局方式
        crossAxisAlignment: CrossAxisAlignment.start,
        // 子控件的布局方式,start: 靠左,end:靠右,spaceEvenly: 均勻分布
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          MyIconContainer01(Icons.home,color: Colors.blue,),
          MyIconContainer01(Icons.search,color: Colors.pink,),
          MyIconContainer01(Icons.send,color:Colors.yellow)
        ],
      ),
    );
  }
}

2. 水平布局和垂直( Column )布局的

/**
 * 
 * Layout布局的demo
 */
class  LayoutDemo extends StatelessWidget {
    @override
  Widget build(BuildContext context) {

    // TODO: implement build
    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Container(
                height: 180,
                color: Colors.black,
                child: Text('你好flutter'),
              ),
            )
          ],
        ),
        SizedBox(height: 10,),
        Row(         
          children: <Widget>[
            Expanded(
              flex: 2,
              child: Container(
                height: 180,
                child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
              ),
            ),
            SizedBox(width: 10,),
            Expanded(
              flex: 1,
              child: Container(
                height: 180,
                  child: ListView(
                    children: <Widget>[
                        Container(
                          height: 90,
                          child: Image.network("https://www.itying.com/images/flutter/3.png",fit: BoxFit.cover,),
                        ),
                         SizedBox(height: 10,),
                        Container(
                          height: 90,
                          child:Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover,),
                        ),
                    ],
                  )
              ),
            )
          ],
        )
      ],
    );
  }
}

3. Stack層疊組件布局

/**
 * 
 * Stack組件,  自由定位子控件,相當于前端的懸浮
 * 
 */
class  MyStackLayout01 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Stack(
        // alignment: Alignment.center,
        // Alignment這里面的參數(shù),x,y是-1到1之間變化,就可以達到定位的效果
        alignment: Alignment(-1,1),
        children: <Widget>[
          Container(
            height: 400,
            width: 300,
            color: Colors.red,

          ),
          Text("我是一個文本"),
          Text("我是一個文本22"),
          Text("我是一個文本454"),
          Text("我是一個文本54題4"),
        ],
      ),
    );
  }
}

4. Stack層疊組件 結合Align 給多個子組件布局


/**
 * 
 * Stack組件--結合Align給多個子控件布局
 * 
 */
class  MyStackLayout02 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.yellow,
        child: Stack(
        // alignment: Alignment.center,
        // Alignment這里面的參數(shù),x,y是-1到1之間變化,就可以達到定位的效果
        alignment: Alignment(-1,1),
        children: <Widget>[
          Align(
            alignment: Alignment(0, 0),
            child: Icon(Icons.home,size: 40,color: Colors.blue,),
          ),
           Align(
            alignment: Alignment(0, 1),
            child: Icon(Icons.select_all,size: 40,color: Colors.green,),
          ),
           Align(
            alignment: Alignment(1, 0),
            child: Icon(Icons.satellite,size: 40,color: Colors.red,),
          ),
           Align(
            alignment: Alignment(1, 1),
            child: Icon(Icons.save,size: 40,color: Colors.pink,),
          ),

        ],
      ),
      ),
    );
  } 
}

5. Stack層疊組件 結合Positioned給多個子控件布局


/**
 * 
 * Stack組件--結合Positioned給多個子控件布局
 * 
 */
class  MyStackLayout03 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.yellow,
        child: Stack(
        // alignment: Alignment.center,
        // Alignment這里面的參數(shù),x,y是-1到1之間變化,就可以達到定位的效果
        alignment: Alignment(-1,1),
        children: <Widget>[
          Positioned(
            left: 0,
            top: 0,
            child: Icon(Icons.home,size: 40,color: Colors.blue,),
          ),
           Positioned(
            right: 0,
            top: 0,
            child: Icon(Icons.select_all,size: 40,color: Colors.green,),
          ),
           Positioned(
            bottom: 0,
            child: Icon(Icons.satellite,size: 40,color: Colors.red,),
          ),
           Positioned(
            bottom: 0,
            right: 0,
            child: Icon(Icons.save,size: 40,color: Colors.pink,),
          ),

        ],
      ),
      ),
    );
  } 
}

6. AspectRatio組件

/**
 * 
 * AspectRatio組件
 */
class  MyAspectRatio extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return AspectRatio(
      // aspectRatio 表示寬高比,  這里寬是占滿整屏幕的
      aspectRatio: 3.0/1.0,
      child: Container(
        color: Colors.red,
      ),
      
    );
  }
}

7. 卡片組件

/**
 * 卡片布局 -- Card
 */

class  MyCard01 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  "張三",
                  style: TextStyle(fontSize: 28),
                  ),
                  subtitle: Text("高級工程師傅"),
              ),
              ListTile(
                title: Text("電話:XXXXXX"),
              ),
              ListTile(
                title: Text("地址:XXXXXX"),
              ),
              
            ],
          ),
        ),
         Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  "張三",
                  style: TextStyle(fontSize: 28),
                  ),
                  subtitle: Text("高級工程師傅"),
              ),
              ListTile(
                title: Text("電話:XXXXXX"),
              ),
              ListTile(
                title: Text("地址:XXXXXX"),
              ),
              
            ],
          ),
        )
        
      ],
    );
  }
  
}

8. Card-- 商品的圖文布局


/**
 * 卡片布局 -- Card -- 具有圖文的卡片
 */

class  MyCard02 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
              // 縱橫比例
                aspectRatio: 20/9,
                child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
              ),
              ListTile(
                // CircleAvatar這個控件專門設置頭像的
                leading: CircleAvatar(
                  backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"),
                ),
                title: Text("姓名:xxxxxxxx"),
                subtitle: Text("電話:xxxxxx"),
              )
            ],
          ),
        ),
         Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20/9,
                child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,),
              ),
              ListTile(
                // ClipOval實現(xiàn)圓圖片
                leading: ClipOval(
                  
                  child: Image.network("https://www.itying.com/images/flutter/3.png",height: 40,width: 40,fit: BoxFit.cover,),
                  
                ),
                title: Text("姓名:xxxxx"),
                subtitle: Text("電話:xxxxx"),

              )
            ],
          ),
        )
        
      ],
    );
  }
}

9. 卡片布局 -- Card -- 用本地數(shù)據(jù)模擬網(wǎng)絡數(shù)據(jù),加載有圖文的卡片


/**
 * 卡片布局 -- Card -- 用本地數(shù)據(jù)模擬網(wǎng)絡數(shù)據(jù),加載有圖文的卡片
 */

class  MyCard03 extends StatelessWidget{
    @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: listData.map((value){
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20/9,
                child: Image.network(value["imageUrl"],fit: BoxFit.cover,),
              ),
              ListTile(
                title: Text(value["title"]),
                subtitle: Text(value["author"]),
              )
            ],
          ),
        ); 
      }).toList()
    );
  }
}

10. wrap組件布局方式

wrap組件相當于就是一個流式布局,比如很多按鈕,按照x軸去排列,如果排列不下,就換一行繼續(xù)排列,與Row布局 和Column布局方式是一起的

在講wrap組件之間,先講講按鈕組件

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

    return Container(
      color: Colors.yellow,
      height: 600,
      width: double.infinity, // 這個寫法就是表示占滿整個屏幕
      child: Wrap(
        spacing: 10,// 間距
        // runSpacing: 10,  // 垂直方向間距
        alignment: WrapAlignment.start,  // 左對齊方式
        // direction: Axis.vertical,  // 垂直方向排列
        children: <Widget>[
          MyRaisedButton("第1集"),
          MyRaisedButton("第10集"),
          MyRaisedButton("第110集"),
          MyRaisedButton("第1101集"),
          MyRaisedButton("第1123集"),
          MyRaisedButton("第1543集"),
          MyRaisedButton("第1435集"),
          MyRaisedButton("第154325集"),
          MyRaisedButton("第15435集"),
          MyRaisedButton("第153245集"),
          MyRaisedButton("第431集"),
        ],
      )
    );
    // TODO: implement build
    
  }
}


/**
 * 按鈕組件RaisedButton
 */
class MyRaisedButton extends StatelessWidget{
  final String text;
  const MyRaisedButton(this.text,{Key key});
  // const MyRaisedButton(this.text,{Key key});
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text), 
      onPressed: () {
        print(this.text);
      },
      textColor: Theme.of(context).accentColor
    );
  }
}

二, Tabbar

1. Flutter中自定義有狀態(tài)組件 StatefullWidget

在flutter中自定義組件其實就是一個類,這個類需要繼承StatelessWidget或者Statefullwidget

  1. StatelessWidget是無狀態(tài)組件,狀態(tài)不可變的widget
  2. Statefullwidget是有狀態(tài)組件,持有狀態(tài)可能在widget生命周期改變,如果想要改變頁面中的數(shù)據(jù)的話,這個時候就需要用到StatefulWidget

下面代碼實現(xiàn),點擊按鈕,可以改變上面的數(shù)據(jù)

/**
 * 有狀態(tài)組件
 */
class MyStateFul01 extends StatefulWidget {
  MyStateFul01({Key key}) : super(key: key);

  _MyStateFul01State createState() => _MyStateFul01State();
}

class _MyStateFul01State extends State<MyStateFul01> {
  int countNum = 0;
  @override
  Widget build(BuildContext context) {
    return Container(
       child: Column(
         children: <Widget>[
            SizedBox(height: 100,),
            Chip(
              label: Text("${this.countNum}"),
              
            ),
            RaisedButton(
              onPressed: () {
                setState(() {
                  this.countNum++;
                });
              },
              child: Text("這是一個按鈕"),
              
            )

         ],
       ),
    );
  }
}

第二份代碼,實現(xiàn)點擊按鈕,給list添加數(shù)據(jù),把數(shù)據(jù)展示在listView上

/**
 * 有狀態(tài)組件 點擊按鈕實現(xiàn)改變數(shù)據(jù)01
 */
class MyStateFul02 extends StatefulWidget {
  MyStateFul02({Key key}) : super(key: key);

  _MyStateFul02State createState() => _MyStateFul02State();
}

class _MyStateFul02State extends State<MyStateFul02> {
  List list = new List();
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Column(
          children: this.list.map((value){
            return ListTile(
              title: Text(value),
            );
          }).toList(),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
               this.list.add("添加一條數(shù)據(jù)01");
            });
           
          },
          child: Text("按鈕"),
          
        )
      ],
    );
  }
}

2. 通過有狀態(tài)組件封裝tabbar

以下代碼可以實現(xiàn)點擊tabbar的效果

/**
 *   抽離tabbar組件 -- 有狀態(tài)
 */
class Tabbar extends StatefulWidget {
  Tabbar({Key key}) : super(key: key);

  _TabbarState createState() => _TabbarState();
}

class _TabbarState extends State<Tabbar> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
            appBar: AppBar(
              title: Text("首頁"),
            ),
            // body: MyIconContainer01(Icons.search,color: Colors.black),
            body: MyStateFul02(),
            // 實現(xiàn)底部tabbar
            bottomNavigationBar: BottomNavigationBar(
              currentIndex: this._currentIndex,  // 初始化在哪個bar
              onTap: (int index){
                setState(() {
                  this._currentIndex = index;
                });
              },
              items: <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text("首頁")
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.category),
                  title: Text("附近")
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.my_location),
                  title: Text("我的")
                ),
                
              ],
         
            )
        );
  }
}
// 在MyApp中  
 home: Tabbar(),即可
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 初學者在一開始接觸到RN的時候，可能在寫樣式的時候，會直接寫成 這樣寫有什么不好呢？我們看處理前和處理后的對比，以...
    雅玲啞鈴閱讀 5,843評論 0贊 4
  • 喜歡文字， 各式各樣的都喜歡！ 可是畢業(yè)幾年， 驀然回首， 發(fā)現(xiàn)， 似乎好像， 把我最喜歡的， 拋棄在了過去時光！...
    靜靜地看風景閱讀 155評論 0贊 0
  • 第26屆世界腦力錦標賽，中國總決賽于2017年11月19日，在大連體育中心圓滿結束。 寧夏銀川婦聯(lián)代表隊李瑩獲得兩...
    幸福腦李景林閱讀 1,640評論 1贊 0
  • 已然是秋了。 曾經很想做的文藝青年，想成為的作家，如今竟然慘淡到沒有了印記。那些奇妙的文字組合，好像再也寫...
    我不是地球人誰是閱讀 375評論 2贊 6

友情鏈接更多精彩內容