flutter 基础组件编写（接口访问数据解析，listview，gridview，底部菜单栏，toast提示，图片加载等）-摩杜云开发者社区

flutter 基础组件编写

看效果图：

flutter 基础组件编写（接口访问数据解析，listview，gridview，底部菜单栏，toast提示，图片加载等）_sed

toast提示展示

void popShort([message,textColor,fontSize,backgroundColor]) {
    Navigator.pop(context);
    if (message != null) {
      Scaffold.of(context).showSnackBar(new SnackBar(
        duration:const Duration(milliseconds: 1000),
        content: new Text(message,style: TextStyle(color: textColor,fontSize: fontSize)),
        backgroundColor: backgroundColor,
        // animation: ,
        // action: new SnackBarAction(
        // label: '取消',
        //     onPressed: () {
        //         // do something to undo
        //     }
        //  ),
      ));

gridview展示

Widget buildItems(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GridView.count(
        crossAxisCount: 4,
        shrinkWrap: true,
         primary:false,
        children: <Widget>[
          MeCell(
            title: '大学生活',
            icon: Icons.school,
            onPressed: () {},
          ),
          MeCell(
            title: '包包',
            icon: Icons.shopping_basket,
            onPressed: () {
              
            },
          ),
          MeCell(
            title: '购物车',
            icon: Icons.add_shopping_cart,
            onPressed: () {},
          ),
          MeCell(
            title: '小说',
            icon: Icons.book,
            onPressed: () {},
          ),
          MeCell(
            title: '书架',
            icon: Icons.collections_bookmark,
            onPressed: () {},
          ),
          MeCell(
            title: 'download',
            icon: Icons.file_download,
            onPressed: () {
            },
          ),
          MeCell(
            title: '货币',
            icon: Icons.monetization_on,
            onPressed: () {
            },
          ),
          MeCell(
            title: 'sport',
            icon: Icons.accessibility,
            onPressed: () {
            },
          ),
        ],
      ),
    );
  }

  Widget buildItems2(BuildContext context) {
    return Container(
      color: Colors.white,
      child: GridView.count(
        crossAxisCount: 5,
        shrinkWrap: true,
        primary:false,
        children: <Widget>[
          MeCell(
            title: '图片',
            icon: Icons.add_photo_alternate,
            onPressed: () {},
          ),
          MeCell(
            title: '更多',
            icon: Icons.more,
            onPressed: () {},
          ),
          MeCell(
            title: '设置',
            icon: Icons.confirmation_number,
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) {
                return SettingPage();
              }));
            },
          ),
          MeCell(
            title: 'GitHb',
      
            icon: Icons.person,
            onPressed: () {
              AppNavigator.pushWeb(
                 context, 'https://github.com/1136346879/flutter-', 'Github');
                  // context, 'https://github.com/Meandni', 'Github');
                    // context, 'http://t.pae.baidu.com/s?s=bai-los3tl', 'Github');
            },
          ),
          MeCell(
                    title: '电影',
                    icon: Icons.video_label,
                    onPressed: () {
                      AppNavigator.pushWeb(
                            context, 'http://t.pae.baidu.com/s?s=bai-los3tl', 'Github');
                    },
          )
        ],
      ),
    );
  }

listview编写

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: barSearch(),
        elevation: 0,
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            MeHeader(),
            SizedBox(height: 12),
            buildItems(context),
            SizedBox(height: 12),
            buildItems2(context),
            videoCard(context)
          ],
        ),
      ),
    );
  }

底部菜单栏编写(showModalBottomSheet)

await showModalBottomSheet(
      context: context,
      builder: (BuildContext bc) {
        return Container(
          child: Wrap(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.label_outline),
                title: Text(
                  '中文',
                ),
                onTap: () {
               this.popShort('切换成功',Colors.red[300],25.0,Colors.blue[300]);
                },
              ),
              ListTile(
                leading: Icon(Icons.label_outline),
                title: Text('英文'),
                onTap: () {
              this.popShort('切换成功',Colors.red[300],25.0,Colors.blue[300]);
                },
              ),
            ],
          ),
        );
      },
    );

页面间的跳转参数传递等

//未传参数
 Navigator.push(context,
                    MaterialPageRoute(builder: (BuildContext ctx) {
                      return gridviewpage();
                    }));
        //携带参数  
          Navigator.push(context,
                     MaterialPageRoute(builder: (BuildContext ctx) {
                       return TabBarViewMe(
                         id: '27110296',
                         title: '无名之辈',
                       );
                     }));

项目源码github

您还可以看看下面的博客文章，回顾以前和继续学习，包含我在学习开发中遇到的难题等等

如对您有帮助，欢迎starts 谢谢。下面是我自己写的demo 可以看看一块学习：

Flutter入门，学习历程，进入开发，在安卓手机运行起来Visual Studio code工具开发flutte总结
Flutter 跨平台开发为什么选择Flutter
跨平台开发为什么选择Flutter
Android 开发者 for Flutter （1）Flutter和Android中的View对比及如何更新widget
Android 开发者 for Flutter （2）如何布局？ XML layout 文件跑哪去了？及布局中添加或删除组件
Android 开发者 for Flutter （3） flutter中动画是如何实现的及如何使用Canvas draw/paint
Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
flutter 中tabbar切换上下均可，banner轮播图，listview刷新添加更多，listview嵌套gridview
Flutter 项目编写第三方插件库文件引入，本地图片 json数据引入解析
flutter run 运行项目所遇到的问题总结(Scaffold加padding及 flutter/material.dart’;爆红问题解决；listview嵌套gridview滑动问题）
Flutter 中如何构建自定义 Widgets
安卓Intent在Flutter中等价于什么？及数据传输和startActivityForResult 在Flutter中等价于什么
异步UI runOnUiThread 在Flutter中等价于什么
AsyncTask和IntentService在Flutter中等价于什么
OkHttp在Flutter中等价于什么

感谢Flutter中文网