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,
        //主轴间距
        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) {
    // RaisedButton用于实现按钮
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}

实现效果:

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 技术工厂 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值