13Flutter頁面布局 Wrap組件

/*
Flutter頁面布局Wrap組件：
Wrap可以實現流布局，單行的Wrap跟Row表現幾乎一致，單列的Wrap則跟Row表現幾乎一致。
但Row與Column都是單行單列的。Wrap則突破了這個限制。mainAxis上空間不足時，則向crossAxis上去擴展展示。
direction  主軸的方向，默認水平。
alignment  主軸的對齊方式
spacing  主軸方向上的間距
textDirection 文本方向
verticalDirection 定義了children擺放順序，默認是down,見Flex相關屬性。
runAlignment run的對齊方式，run可以理解為新的行或者列，如果是水平布局的話，run
可以理解為新的一行
runSpacing  run的間距

*/

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Wrap組件：'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Stack結合align實現布局：
    return Container(
        height: 600,
        width: 400,
        color: Colors.pink,
        child: Wrap(
          spacing: 10,
          runSpacing: 20,
          // direction: Axis.vertical,
          // alignment: WrapAlignment.start,
          runAlignment: WrapAlignment.center,
          children: <Widget>[
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章"),
            MyButton("第一章")
          ],
        ));
  }
}

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: () {},
    );
  }
}