Flutter布局-wrap

wrap：自动换行排列，

return Padding(

      padding: const EdgeInsets.all(20),

      child:  Wrap(

        alignment: WrapAlignment.center,//水平居中

      spacing: 10,//水平间距

      runSpacing: 10,//垂直间距

    //  direction: Axis.vertical,

      children: [

           MyButton("第1级",onPressed: (){},),

                  MyButton("第1级",onPressed: (){},),

listview里面不能放listview

  可以放column

 

import 'package:flutter/material.dart';
import 'res/listData.dart';

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

//单独抽成组件需要使用stateless,快捷直接输入
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("www.i7i8i9.com"),
        ),
        body: const LayoutDemo(),
        // body: MyHomePage(),
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  const LayoutDemo({super.key});
  //MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    //final size=MediaQuery.of(context).size;//不能用infinite,获取设备宽度和高度
    return ListView(
      padding: const EdgeInsets.all(10),
      children: [
        Row(
          children: [
            Text(
              "热搜",
              style: Theme.of(context).textTheme.titleLarge,
            )
          ],
        ),
        const Divider(),
        Wrap(
          spacing: 30,
          runSpacing: 30,
          children: [
            MyButton("女装", onPressed: () {}),
            MyButton("儿童服装", onPressed: () {}),
            MyButton("电脑", onPressed: () {}),
            MyButton("手机", onPressed: () {}),
            MyButton("汽车", onPressed: () {}),
            MyButton("洗发水", onPressed: () {}),
            MyButton("洗衣液", onPressed: () {}),
            MyButton("电视", onPressed: () {}),
            MyButton("洗衣机", onPressed: () {}),
            MyButton("冰箱", onPressed: () {}),
            MyButton("烟酒", onPressed: () {}),
            MyButton("饮料", onPressed: () {}),
            MyButton("糖果", onPressed: () {}),
            MyButton("泡菜", onPressed: () {}),
            MyButton("水果", onPressed: () {}),
          ],
        ),
        const SizedBox(height: 20),
        Row(
          children: [
            Text(
              "历史记录",
              style: Theme.of(context).textTheme.titleLarge,
            )
          ],
        ),
        const Divider(),
        Column(
          //listview里面不能放listview
          children: const [
            ListTile(
              title: Text("女装"),
            ),
            Divider(),
            ListTile(
              title: Text("手机"),
            ),
            Divider(),
            ListTile(
              title: Text("电脑"),
            ),
            Divider(),
          ],
        ),
        const SizedBox(
          height: 40,
        ),
        Padding(
          padding: const EdgeInsets.all(40),
          child:  OutlinedButton.icon(
            style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all(Colors.black45),
            ),
                onPressed: () {},
                icon: const Icon(Icons.delete),
                label: const Text("清空历史记录")),
          ),
      ],
    );
  }
}

//自定义按钮
class MyButton extends StatelessWidget {
  String text; //按钮文字
  void Function()? onPressed; //外部方法传入
  MyButton(this.text, {super.key, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      //raised button已经过时
      style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all(const Color.fromARGB(242, 255, 244, 244)),
        foregroundColor: MaterialStateProperty.all(Colors.black45),
      ),
      onPressed: onPressed,
      child: Text(text),
    );
  }
}