flutter頁面佈局三

RaisedButton

爲了實現今天的效果，在認識Wrap組件以前，先認識一下flutter中的按鈕組件，Flutter 中經過 RaisedButton 定義一個按鈕。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(title: Text('FlutterDemo')),
        body: LayoutDemo(),
      ));
  }
}
class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text('第一季'),
      textColor: Theme.of(context).accentColor,      
      onPressed: (){        
      },
    );
  }
}

可是單獨爲了一個按鈕寫一個組件的話，當須要多個按鈕的時候，就須要進行封裝了。

class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Row(
          children: <Widget>[
                MyButton("第1集"),
                MyButton("第2集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
          ],
        ),
    );
  }
}

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

此時，因爲按鈕數量較多，一行排不下了，可是並無像咱們預期的那樣自動換行，而是出現了溢出的提示，這種狀況下，咱們就須要使用Wrap組件了。

Wrap 組件

Wrap 能夠實現流佈局，單行的 Wrap 跟 Row 表現幾乎一致，單列的 Wrap 則跟 Row 表現幾乎一致。但 Row 與 Column 都是單行單列的，Wrap 則突破了這個限制，mainAxis 上空間不足時，則向 crossAxis 上去擴展顯示。

Wrap組件裏面有不少的參數：

• direction ：主軸的方向，默認水平
• alignment ：主軸的對其方式
• spacing：主軸方向上的間距
• textDirection：文本方向
• verticalDirection：定義了 children 擺放順序，默認是 down
• runAlignment ：run 的對齊方式。run 能夠理解爲新的行或者列，若是是水平方向佈局的話，run 能夠理解爲新的一行 
• runSpacing ：run 的間距

class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return Wrap(
          spacing:10,
          runSpacing: 10,
          children: <Widget>[
                MyButton("第1集"),
                MyButton("第2集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
          ],
      
    );
  }
}

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

如今，功能已經實現了，咱們能夠在此基礎上，結合其餘的組件進行一下界面優化了：

class LayoutDemo extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 600,
      width: 400,
      color: Colors.pink,
      padding: EdgeInsets.all(10),
      child: Wrap(
          spacing:10,
          runSpacing: 10,
          direction: Axis.vertical,
          // alignment:WrapAlignment.spaceEvenly,
          // runAlignment: WrapAlignment.center,
          children: <Widget>[
                MyButton("第1集"),
                MyButton("第2集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
                MyButton("第3集"),
                MyButton("第4集"),
                MyButton("第5集"),
                MyButton("第6集"),
                MyButton("第7集"),
                MyButton("第8集"),
                MyButton("第9集"),
                MyButton("第10集"),
                MyButton("第11集"),
          ],
        ),
    );
  }
}

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