Flutter 页面布局 Wrap组件

 Wrap组件实现流布局

//导入了Material UI组件库 ,快捷操作fim
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
//StatelessWidget:无状态组件，状态不可变的widget
//StatefulWidget:有状态组件，状态可以改变
//fluter中一切都是组件
//使用MaterialApp和Scaffold 两个组件装饰App
//MaterialApp一般作为根组件----home、title、color、theme、routes等
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //标题栏
        appBar: AppBar(
          title: Text("Flutter Demo"),
        ),
        //内容区域
        body: HomeContent(),
      ),
      //主题
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //Wrap 实现流式布局
    return Container(
      padding: EdgeInsets.fromLTRB(10, 5, 10, 10),
      child: Wrap(
        //布局方向
        direction: Axis.horizontal,
        //主轴间距