Flutter wrap组件的应用

最新推荐文章于 2024-08-11 16:54:24 发布

清风99w

最新推荐文章于 2024-08-11 16:54:24 发布

阅读量240

点赞数 2

分类专栏： Flutter

本文链接：https://blog.csdn.net/weixin_45425105/article/details/111180610

版权

Flutter 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

（一）效果图
在这里插入图片描述

（二）实现要点
按钮可以使用构造函数

（三）代码实现

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('甜宠软妹'),
        centerTitle: true,
      ),
      body: WrapDemo(),
    ));
  }
}

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(//流布局
      spacing: 10,//水平间距
      runSpacing: 10,//纵轴间距，一般有默认间距，不用设置太大
      children: <Widget>[
        MyButton("master"),
        MyButton("master mine"),
        MyButton("master"),
        MyButton("master you"),
        MyButton("master"),
        MyButton("master lucky"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  //构造函数
  const MyButton(this.text, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}