Wrap组件的基本使用

Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表 现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，则向 crossAxis 上去扩展显示

属性

属性

• RaisedButton按钮组件

import 'package:flutter/material.dart';

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

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      onPressed: () {},
      textColor: Colors.red,
      child: Text(
        '这是一个按钮',
        style: TextStyle(
            // color:Colors.yellow
            ),
      ),
    );
  }
}

//MaterialApp组件作为根组件使用
// Scaffold  有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement buildå
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('导航栏'),
        ),
        body: HomeContent(),
      ),
    );
  }
}

Wrap组件的使用

import 'package:flutter/material.dart';

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

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(
      onPressed: () {},
      textColor: Colors.red,
      child: Text(
        this.text,
        style: TextStyle(
            // color:Colors.yellow
            ),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 600,
      width: 300,
      color: Colors.pink,
      child: Wrap(
        //主轴方向的间距
        spacing: 50,
        //纵轴的间距
        runSpacing: 30,
        //横轴对齐方式
        alignment: WrapAlignment.end,
        //纵轴对齐方式
        runAlignment: WrapAlignment.start,
        children: <Widget>[
          MyButton('111111'),
          MyButton('111111'),
          MyButton('111111'),
          MyButton('111111'),
          MyButton('111111'),
          MyButton('111111'),
          MyButton('111111'),
        ],
      ),
    );
  }
}

//MaterialApp组件作为根组件使用
// Scaffold  有下面几个主要属性
// appBar-界面顶部导航栏 body-界面显示的主要内容Widget drawer-抽屉菜单控件

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement buildå
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('导航栏'),
        ),
        body: HomeContent(),
      ),
    );
  }
}