前端入门flutter--11Flutter 页面布局 Wrap组件

　　飞流直下三千尺，疑是银河落九天，额，不对，是有个奶娃在山顶洒水。。。。。。

　　咳，回归正题，在一些奇奇葩葩的需求里面有错乱视觉“美”，一般常规的布局很难快速满足需求，这时候该使出流水一般的布局，流布局了：

　　

　　

import 'package:flutter/material.dart';
import 'package:flutter_app1/res/listData.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: Mybody(),
      ),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}
//Wrap实现流布局
class Mybody extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return Container(
     padding: EdgeInsets.fromLTRB(10, 5, 10, 10),
     child:Wrap(
       //布局方向
       direction: Axis.horizontal,
     //  主轴间距
       spacing: 10,
     //  次轴间距
       runSpacing: 0,
       children: <Widget>[
         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
  //  RaisedButton用于实现按钮
    return RaisedButton(
        child: Text(this.text),
        textColor: Theme.of(context).accentColor,
        onPressed: (){}
        );
  }
}