flutter学习之旅 - Wrap组件

Wrap组件

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

属性	说明
direction	主轴方向，默认水平
alignment	主轴对齐方向
spacing	主轴方向上的间距
verticalDirection	定义了children摆放顺序，默认是down,见Fiex相关属性介绍
runAlignment	run的对齐方式。run可以理解为新的行或者列，如果水平方向布局的话run可以理解为新的一行
runSpacing	run的间距

//自定义按钮
class _MyButton extends StatelessWidget {
  String text;
  void Function()? onPressed;
  _MyButton(this.text, {Key? key, required this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

class _WrapWidget extends StatelessWidget {
  const _WrapWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      children: [
        _MyButton("第一集", onPressed: () {}),
        _MyButton("第二集", onPressed: () {}),
        _MyButton("第三集", onPressed: () {}),
        _MyButton("第四集", onPressed: () {}),
        _MyButton("第五集", onPressed: () {}),
        _MyButton("第六集", onPressed: () {}),
      ],
    );
  }
}

使用Wrap组件实现电商App搜索页面布局

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // final size = MediaQuery.of(context).size;
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: const Color.fromRGBO(255, 255, 255, 1),
          title: const _SearchTitle(),
        ),
        body: ListView(
          children: [
            Row(
              children: const [Text("热搜")],
            ),
            const _ReSouWidget(),
            const SizedBox(height: 10),
            Row(
              children: const [Text("历史记录")],
            ),
            const SizedBox(height: 20),
            _LiShiJiLuWidget("刀剑"),
            const SizedBox(height: 20),
            _LiShiJiLuWidget("孤独摇滚"),
            const SizedBox(height: 40),
            Padding(
              padding: const EdgeInsets.all(40),
              child: OutlinedButton.icon(
                onPressed: () {},
                label: const Text("清除历史记录"),
                icon: const Icon(Icons.delete),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class _SearchTitle extends StatelessWidget {
  const _SearchTitle({Key? key}) : super(key: key);
  // const size = ;
  @override
  Widget build(BuildContext context) {
    return Row(
      children: const [
        Icon(
          Icons.arrow_back,
          color: Colors.black,
        ),
        SizedBox(
          width: 10,
        ),
        InputChip(
          label: Text("搜索"),
        )
      ],
    );
  }
}

//自定义按钮
class _MyButton extends StatelessWidget {
  String text;
  void Function()? onPressed;
  _MyButton(this.text, {Key? key, required this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

class _ReSouWidget extends StatelessWidget {
  const _ReSouWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 5,
      runSpacing: 5,
      children: [
        _MyButton("刀剑神域", onPressed: () {}),
        _MyButton("野良神", onPressed: () {}),
        _MyButton("碧蓝之海", onPressed: () {}),
        _MyButton("总之就是非常可爱", onPressed: () {}),
        _MyButton("盾之勇者成名录", onPressed: () {}),
      ],
    );
  }
}

class _LiShiJiLuWidget extends StatelessWidget {
  String text1;
  _LiShiJiLuWidget(this.text1, {Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 20,
      child: Row(
        children: [const Icon(Icons.search), Text(text1)],
      ),
    );
  }
}

效果图: