flutter 网格布局

参考

    const SONGNAME = [
      '音乐1',
      '音乐2',
      '音乐3',
      '音乐3',
      '音乐4',
      '音乐5',
      '音乐6',
      '音乐7',
      '音乐8',
      '音乐9',
      '音乐10',
      '音乐11',
      '音乐12',
      '音乐13'
    ];
    
 //更多为你推荐的列表方法体
    Widget ServiceItem(String name) {
      return Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            margin: const EdgeInsets.only(top: 10, left: 10, right: 5),
            child: Image.network(
              "https://www.itying.com/images/flutter/2.png",
              width: 160.0,
              height: 95.0,
              fit: BoxFit.cover,
            ),
          ),
          Text(
            name,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
        ],
      );
    }

//更多为你推荐的网格列表,最后调用这个版块就可以了
    Widget recommendedListSection = SizedBox(
    //整个网格的高度
        height: 500,
        child: GridView(
          padding: const EdgeInsets.symmetric(vertical: 0),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          //这里就是加载数据的地方
          children: SONGNAME.map((item) => ServiceItem(item)).toList(),
        ));

全部代码如下

import 'package:flutter/material.dart';

/*
* 音乐界面,相当于fragment
*/
//该界面创建有状态的组件
class MusicPage extends StatefulWidget {
  const MusicPage({Key? key}) : super(key: key);

  @override
  //状态
  PlaygroundState createState() => PlaygroundState();
}

class PlaygroundState extends State<MusicPage> {
  @override
  Widget build(BuildContext context) {
    Widget bannerSection = Container(
      margin: const EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0),
      child: Image.asset(
        'assets/base_widgets/icon_banner.png',
        height: 80.0,
        fit: BoxFit.cover,
      ),
    );

    Column menuButtonColumn(IconData icon, String label) {
      //嵌套函数：把共同的属性写好，方便buttonSection调用
      //设置为主题颜色
      Color color = Theme.of(context).primaryColor;
      //返回列的形式
      return Column(
        //调用该方法后返回这个显示,每个元素以列的方式显示
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        //有两个元素
        children: [
          Icon(icon, color: color), //图标
          Container(
            //将文字设置为容器,设置边距
            margin: const EdgeInsets.only(top: 8.0), //文字距离上面图标的距离
            child: Text(
              //元素就是一个文字
              label,
              style: TextStyle(
                //设置文字风格
                fontSize: 12.0,
                fontWeight: FontWeight.w400,
                color: color,
              ),
            ),
          )
        ],
      );
    }

    //
    Widget buttonMenuSection = Container(
      margin: const EdgeInsets.only(
          top: 20.0, bottom: 20.0, left: 10.0, right: 10.0),
      //先从行上开始进行分析
      child: Row(
        //平均的分配每个列占据的行空间
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        //行上的四个元素
        //调用方法,不然要写很多
        children: [
          menuButtonColumn(Icons.call, '签到'),
          menuButtonColumn(Icons.near_me, '榜单'),
          menuButtonColumn(Icons.share, '创作'),
          menuButtonColumn(Icons.share, '商城'),
          menuButtonColumn(Icons.share, '游戏'),
        ],
      ),
    );

    //人气艺人标题部分
    Widget popularArtistTitleSection = Row(
      children: [
        Expanded(
          child: Container(
              margin: const EdgeInsets.only(left: 10.0),
              child: const Text(
                "人气艺人",
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
        ),
        Container(
            margin: const EdgeInsets.only(right: 10.0),
            child: const Text(
              "更多>>",
              style: TextStyle(fontWeight: FontWeight.bold),
            ))
      ],
    );

    //人气艺人列表
    Widget popularArtistListSection = SizedBox(
        height: 220.0,
        child: ListView(
            // 内边距
            padding: const EdgeInsets.all(10),
            // 水平列表
            scrollDirection: Axis.horizontal,
            // 子元素
            children: <Widget>[
              Container(
                  padding: const EdgeInsets.only(top: 30),
                  // 宽度
                  width: 180.0,
                  // 颜色
                  color: Colors.red,
                  // 子元素
                  child: ListView(
                    children: <Widget>[
                      Image.network(
                        "https://www.itying.com/images/flutter/1.png",
                        width: 70.0,
                        height: 70.0,
                      ),
                      const Text(
                        '姓名',
                        style: TextStyle(fontSize: 14.0),
                        textAlign: TextAlign.center,
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 40.0, right: 40.0),
                        child: ElevatedButton(
                          onPressed: () {},
                          child: const Text("+ 关注"),
                        ),
                      ),
                    ],
                  )),
              Container(
                  padding: const EdgeInsets.only(top: 30),
                  width: 180.0,
                  color: Colors.yellow,
                  child: ListView(
                    children: <Widget>[
                      Image.network(
                        "https://www.itying.com/images/flutter/2.png",
                        width: 70.0,
                        height: 70.0,
                      ),
                      const Text(
                        '姓名',
                        style: TextStyle(fontSize: 14.0),
                        textAlign: TextAlign.center,
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 40.0, right: 40.0),
                        child: ElevatedButton(
                          onPressed: () {},
                          child: const Text("+ 关注"),
                        ),
                      ),
                    ],
                  )),
              Container(
                  padding: const EdgeInsets.only(top: 30),
                  width: 180.0,
                  color: Colors.blue,
                  child: ListView(
                    children: <Widget>[
                      Image.network(
                        "https://www.itying.com/images/flutter/3.png",
                        width: 70.0,
                        height: 70.0,
                      ),
                      const Text(
                        '姓名',
                        style: TextStyle(fontSize: 14.0),
                        textAlign: TextAlign.center,
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 40.0, right: 40.0),
                        child: ElevatedButton(
                          onPressed: () {},
                          child: const Text("+ 关注"),
                        ),
                      ),
                    ],
                  )),
              Container(
                  padding: const EdgeInsets.only(top: 30),
                  width: 180.0,
                  color: Colors.green,
                  child: ListView(
                    children: <Widget>[
                      Image.network(
                        "https://www.itying.com/images/flutter/4.png",
                        width: 70.0,
                        height: 70.0,
                      ),
                      const Text(
                        '姓名',
                        style: TextStyle(fontSize: 14.0),
                        textAlign: TextAlign.center,
                      ),
                      Container(
                        margin: const EdgeInsets.only(left: 40.0, right: 40.0),
                        child: ElevatedButton(
                          onPressed: () {},
                          child: const Text("+ 关注"),
                        ),
                      ),
                    ],
                  )),
            ]));

    //人气金曲列表
    Widget popularSongTitleSection = Row(
      children: [
        Expanded(
          child: Container(
              margin: const EdgeInsets.only(left: 10.0),
              child: const Text(
                "人气金曲",
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
        ),
        Container(
            margin: const EdgeInsets.only(right: 10.0),
            child: const Text(
              "更多>>",
              style: TextStyle(fontWeight: FontWeight.bold),
            ))
      ],
    );

    //人气金曲列表的名称
    const SONGNAME = [
      '音乐1',
      '音乐2',
      '音乐3',
      '音乐3',
      '音乐4',
      '音乐5',
      '音乐6',
      '音乐7',
      '音乐8',
      '音乐9',
      '音乐10',
      '音乐11',
      '音乐12',
      '音乐13'
    ];

    //显示人气金曲列表的方法体
    Widget songItem(String name) {
      return Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            margin: const EdgeInsets.only(top: 10, left: 10, right: 5),
            child: Image.network(
              "https://www.itying.com/images/flutter/3.png",
              width: 160.0,
              height: 120.0,
            ),
          ),
          Text(
            name,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
        ],
      );
    }

    //人气金曲列表
    Widget popularSongListSection = SizedBox(
      height: 170,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: SONGNAME.map((city) => songItem(city)).toList(),
      ),
    );

    //推荐MV标题
    Widget recommendedMvTitleSection = Row(
      children: [
        Expanded(
          child: Container(
              margin: const EdgeInsets.only(left: 10.0),
              child: const Text(
                "推荐MV",
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
        ),
        Container(
            margin: const EdgeInsets.only(right: 10.0),
            child: const Text(
              "更多>>",
              style: TextStyle(fontWeight: FontWeight.bold),
            ))
      ],
    );

    //推荐MV的方法体
    Widget recommendedMvItem() {
      return Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            margin: const EdgeInsets.only(top: 10, left: 10, right: 5),
            child: Image.network(
              "https://www.itying.com/images/flutter/1.png",
              fit: BoxFit.cover,
              width: 250.0,
              height: 200.0,
            ),
          ),
        ],
      );
    }

    //推荐MV列表
    Widget recommendedMvListSection = SizedBox(
      height: 210,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: SONGNAME.map((city) => recommendedMvItem()).toList(),
      ),
    );

    //翻唱作品标题
    Widget coverWorksTitleSection = Row(
      children: [
        Expanded(
          child: Container(
              margin: const EdgeInsets.only(left: 10.0, top: 10.0),
              child: const Text(
                "翻唱作品",
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
        ),
        Container(
            margin: const EdgeInsets.only(right: 10.0),
            child: const Text(
              "更多>>",
              style: TextStyle(fontWeight: FontWeight.bold),
            ))
      ],
    );

    //翻唱作品列表
    Widget coverWorksListSection = SizedBox(
      height: 170,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: SONGNAME.map((city) => songItem(city)).toList(),
      ),
    );

    //更多为你推荐标题
    Widget recommendedTitleSection = Row(
      children: [
        Expanded(
          child: Container(
              margin: const EdgeInsets.only(left: 10.0),
              child: const Text(
                "更多为你推荐",
                style: TextStyle(fontWeight: FontWeight.bold),
              )),
        ),
      ],
    );

    //更多为你推荐的列表方法体
    Widget ServiceItem(String name) {
      return Column(
        children: [
          Container(
            decoration: BoxDecoration(color: Colors.grey[300]),
            margin: const EdgeInsets.only(top: 10, left: 10, right: 5),
            child: Image.network(
              "https://www.itying.com/images/flutter/2.png",
              width: 160.0,
              height: 95.0,
              fit: BoxFit.cover,
            ),
          ),
          Text(
            name,
            style: const TextStyle(
              color: Colors.black,
              fontSize: 16,
            ),
          ),
        ],
      );
    }

    //更多推荐的网格列表
    Widget recommendedListSection = SizedBox(
        height: 500,
        child: GridView(
          padding: const EdgeInsets.symmetric(vertical: 0),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
          ),
          children: SONGNAME.map((item) => ServiceItem(item)).toList(),
        ));

    //MaterialApp-Scaffold
    return MaterialApp(
      //Scaffold相当于布局的容器
      home: Scaffold(
        //appBar是状态栏
        appBar: AppBar(
          //设置文字
          title: const Text("音乐平台"),
          //设置appbar背景颜色
          backgroundColor: const Color.fromARGB(255, 119, 136, 213),
          //设置标题是否局中
          centerTitle: true,
        ),
        //body就是写界面了
        body: ListView(
          children: [
            bannerSection,
            buttonMenuSection,
            popularArtistTitleSection,
            popularArtistListSection,
            popularSongTitleSection,
            popularSongListSection,
            recommendedMvTitleSection,
            recommendedMvListSection,
            coverWorksTitleSection,
            coverWorksListSection,
            recommendedTitleSection,
            recommendedListSection,
          ],
        ),
      ),
    );
  }
}