Code Monkey home page Code Monkey logo

flutter-study's Introduction

dart的学习

1. 常量与变量

  • 变量

      # 可以使用var或者类型定义变量
  main() {
    var num = 123;
    print(num); // 输出123

    String a = "zhangsan";
    int b = 5678;
    print(a); // 输出： "zhangsan"
    print(b); // 输出: 5678
  }

  • 常量

      # 使用final或者const定义常量
  main() {
    const num = 456;
    print(num);

    final a = new DateTime.now(); // 注意，这里使用const会报错
    print(a)
  }

2. 常用的数据类型

3. dart的运算符

4. dart的条件表达式

5. 类型转换

6. dart的循环

7. 集合

8. 函数

9. 类

10.库的引入

  1. Dart中导入自己本地库

  2. 导入系统内置库math库

Flutter的学习

1. 开发环境

  1. 安装JDK，推荐1.8版本

  2. 安装Android Studio

  3. 下载配置 Flutter Sdk

  4. 配置国内镜像的环境变量

  5. 在命令行输入flutter doctor，出现全是√的时候就完成了

  6. 详细文档请看:/flutter/01环境搭建/Flutter介绍-Flutter、Windows、Android环境搭建.pdf

2. 在vscode中运行flutter项目

  1. 在android studio中新建flutter项目后，把项目放到vscode中，输入命令flutter run即可

3. 最简单的例子

  1. helloworld案例，详细代码请看:/flutter/02最简单的例子/helloworld.dart

  2. 自定义组件, 详细代码请看:/flutter/02最简单的例子/自定义组件.dart

  3. 封装抽离组件, 详细代码请看:/flutter/02最简单的例子/封装抽离.dart

  4. MaterialApp&Scaffold完整的组件, 详细代码请看:/flutter/02最简单的例子/MaterialApp&Scaffold.dart

  5. 详细文档请看:/flutter/02最简单的例子/Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件.pdf

4. container与text组件

  1. 普通布局, 详细代码请看:/flutter/03Container&Text/普通布局.dart

  2. 定位布局, 详细代码请看:/flutter/03Container&Text/定位.dart

  3. 旋转组件, 详细代码请看:/flutter/03Container&Text/旋转.dart

  4. 详细文档请看:/flutter/03Container&Text/Flutter-Container组件、Text组件详解.pdf

5. Image图片

  1. 网络图片, 详细代码请看:/flutter/04Image图片/远程图片.dart

  2. 圆角图片

  3. 本地图片

    1. 在根目录下新建images文件夹，并在里面新建2.0x（表示二倍图）, 3.0x（三倍图）文件夹，把图片分别放进去

    2. 在根目录下的pubspec.yaml，找到assets:配置图片

       flutter:
   assets:
   - images/a.jpg
   - images/2.0x/a.jpg
   - images/3.0x/a.jpg

  4. 详细文档请看:/flutter/04Image图片.pdf

6. listView列表

7. listView动态列表及循环

  1. 使用循环方式遍历列表

  2. 使用ListView.builder遍历列表

  3. 相关文档请看:/flutter/06listView动态列表及循环/Flutter-ListView组件.pdf

8. GridView网格列表

  1. crossAxisCount一行多列, 详细代码请看:/flutter/07GridView网格列表/crossAxisCount一行多列.dart

  2. 列间距

  3. 布局练习，一行两列，详细代码请看:/flutter/07GridView网格列表/test.dart

  4. 使用GridView-builder循环列表, 详细代码请看:/flutter/07GridView网格列表/GridView-builder循环列表.dart

  5. 详细文档请看:/flutter/07GridView网格列表/flutter-GridView组件以及动态GridView.pdf

9. Padding、Row、Column、Expanded

  1. Padding组件，用于组件间的padding值设定

  2. Row组件，水平布局

  3. Column组件，垂直布局

  4. Expanded组件，flex，三个盒子，分别占1分，2分，1分

  5. 练习

  6. 详细文档请看:/flutter/08Padding、Row、Column、Expanded/flutter页面布局Paddiing、Row、Column、Expanded组件详解.pdf

10. Stack层叠组件

  1. 只使用alignment,stack里的所有内容位置都变化

  2. stack结合Align组件

  3. stack结合Posited组件

  4. 详细文档请看:/flutter/09Stack层叠组件/Stack层叠组件-Stack与Align、Stack与Positioned实现定位布局.pdf

11. AspectRatio宽高比组件与Card组件

  1. AspectRatio宽高比组件，相对于父元素

  2. Card组件

  3. 练习

  4. 详细文档请看:/flutter/10AspectRatio宽高比组件与Card组件/Flutter-AspectRatio、Card卡片组件.pdf

12. Wrap组件，超过一行之后，自动换行

  1. 横轴的换行

  2. 纵轴的换行

  3. 详细文档请看:/flutter/11Wrap组件/Flutter页面布局Wrap组件.pdf

13. 有状态组件，页面改变数据

14. BottomNavigationBar底部导航栏

  1. 详细代码请看:/flutter/13BottomNavigationBar底部导航栏/demo.dart

  2. 详细文档请看:/flutter/13BottomNavigationBar底部导航栏/BottomNavigationBar-自定义底部导航条、以及实现页面切换.pdf

15. 路由、路由跳转、路由跳转传值

  1. 路由跳转，使用Navigator.push

  2. 路由传值

  3. 命名路由跳转,使用Navigator.pushNamed

  4. 命名路由跳转传值,使用onGenerateRoute

  5. 在命名路由跳转传值基础上进行封装，抽离路由。production.dart包含有状态组件的传值

  6. 详细文档请看:/flutter/14路由、路由跳转、路由跳转传值、命名路由、命名路由传值/Flutter中的普通路由、普通路由传值、命名路由、命名路由传值.pdf

16. 替换路由

  1. 使用Navigator.pushNamed这种跳转，返回的时候只能返回上一级

  2. 使用Navigator.pushReplacementNamed跳转，可以返回到第一级

  3. 普通路由跳转，返回到第一级，使用Navigator.pushAndRemoveUntil

  4. 普通路由跳转，返回到指定目录

  5. 详细文档请看:/flutter/15替换路由/Flutter中的路由-pushReplacementNamed路由替换、pushNamedAndRemoveUntil返回到根路由.pdf

17. 自定义头部导航栏

  1. 设置导航栏的文字，图标

  2. 顶部导航栏设置选项卡

  3. 有底部导航栏的时候增加顶部选项卡

  4. 使用tabController渲染顶部导航栏，使用tabController的好处是，可以给选项卡添加事件

  5. 详细文档请看:/flutter/16自定义头部导航栏/Flutter-AppBar自定义顶部导航按钮、图标颜色以及TabBar定义顶部Tab切换.pdf

18. Draw抽屉组件

  1. DrawHeader抽屉头部自定义组件

  2. UserAccountsDrawerHeader头部组件

  3. 抽屉中点击事件，跳转，使用onTap

  4. 详细文档请看:/flutter/17Draw抽屉组件/Flutter-Drawer侧边栏以及侧边栏内容布局.pdf

19. 按钮组件

  1. RaisedButton：凸起的按钮，其实就是 Material Design 风格的 Button

  2. FlatButton：扁平化的按钮

  3. OutlineButton：线框按钮

  4. IconButton：图标按钮

  5. ButtonBar:按钮组

  6. FloatingActionButton:浮动按钮

  7. 详细代码请看:/flutter/18按钮组件/demo.dart

  8. 实现以下效果: 底部浮动按钮

  9. 详细文档请看:/flutter/18按钮组件/Flutter-FloatingActionButton结合底部tab实现中间凸起按钮.pdf

  10. 详细文档请看:/flutter/18按钮组件/Flutter中的按钮组件.pdf

20. TextField表单组件、Checkbox复选框、Radio单选框

  1. 布局，详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/demo.dart

  2. 设置初始值以及修改, 详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/表单的赋值和修改.dart

  3. checkbox布局和修改值, 详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/checkbox.dart

  4. CheckboxListTile,复选框列表，详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/CheckboxListTile.dart

  5. Radio布局和修改值，详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/Radio.dart

  6. RadioListTile单选列表布局，详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/RadioListTile.dart

  7. Switch开关组件，详细代码请看:/flutter/19TextField表单组件、Checkbox复选框、Radio单选框/Switch.dart

  8. 详细文档请看:/flutter/19按钮组件/Flutter中的表单.pdf

21. Flutter日期和时间戳、格式化日期库、Future异步、官方自带日期组件showDatePicker 时间组件showTimePicker 以及国际化

  1. flutter日期间的相互转换

    • 获取时间：DateTime.now();
      var now = DateTime.now();
  print(now); // 获取当前时间  2020-02-22 18:51:27.642596
    • 时间转换为时间戳：DateTime.now().millisecondsSinceEpoch
      var now = DateTime.now();
  print(now.millisecondsSinceEpoch); // 日期转换为时间戳  1582368687642
    • 时间戳转换为时间: DateTime.fromMillisecondsSinceEpoch()
      print(DateTime.fromMillisecondsSinceEpoch(1582368144393)); // 将时间戳转换为时间 2020-02-22 18:42:24.393

  2. 时间的转换

    • 使用第三方库dateformat

    1. 在pubspec.yaml中配置dateformat

        dependencies:
    date_format: ^1.0.8

    2. 引入包并使用

        import 'package:date_format/date_format.dart';

  print(formatDate(DateTime.now(), [yyyy, '-', mm, '-', dd]));

    3. 详细文档请看:https://pub.dev/packages/date_format

    4. 详细代码请看:/flutter/20Flutter日期和时间戳、格式化日期库、Future异步、官方自带日期组件showDatePicker时间组件showTimePicker以及国际化/demo.dart

  3. flutter自带日期控件,包括修改值

  4. flutter自带时间控件,包括修改值

  5. flutter设置国际化

    1. 配置flutter_localizations依赖

        找到pubspec.yaml配置flutter_localizations
  dependencies:
    flutter:
      sdk: flutter
    flutter_localizations:
      sdk: flutter

    2. 导入国际化的包 flutter_localizations

        import 'package:flutter_localizations/flutter_localizations.dart';

    3. 设置国际化

        void main() {
    runApp(
      new MaterialApp(
        title: 'app',
        theme: new ThemeData(
          primaryColor: Colors.white,
        ),
        home: new MyLoginWidget(),
        localizationsDelegates: [
          //此处
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          //此处
          const Locale('zh', 'CH'),
          const Locale('en', 'US'),
        ],
      ),
    );
  }

    4. 要显示中文的控件设置

        _showDatePicker() async{
    var date =await showDatePicker(
      context: context,
      initialDate: _datetime,
      firstDate:DateTime(1900),
      lastDate:DateTime(2050),
      locale: Locale('zh'),    
    );
    if(date==null) return;
    print(date);
    setState(() {
      _datetime=date;
    });
  }

    5. 详细文档请看:http://bbs.itying.com/topic/5cfb2a12f322340b2c90e764

22. 第三方日期控件flutter_cupertino_date_picker

  1. 第一步： 在pubspec.yaml配置flutter_cupertino_date_picker

     dependencies:
   flutter_cupertino_date_picker: ^1.0.12

  2. 第二步：导入控件,在Home.dart中引入包

     import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

  3. 结合文档，写入代码：

     DatePicker.showDatePicker(
   context,
   pickerTheme: DateTimePickerTheme(
     showTitle: _showTitle,
     confirm: Text('确定', style: TextStyle(color: Colors.red)),
     cancel: Text('取消', style: TextStyle(color: Colors.cyan)),
   ),
   minDateTime: DateTime.parse(minDate),
   maxDateTime: DateTime.parse(maxDate),
   initialDateTime: _dateTime,
   dateFormat: _format,
   locale: DateTimePickerLocale.zh_cn,
   onClose: () => print("----- onClose -----"),
   onCancel: () => print('onCancel'),
   onChange: (dateTime, List<int> index) {
     setState(() {
       _dateTime = dateTime;
     });
   },
   onConfirm: (dateTime, List<int> index) {
     setState(() {
       _dateTime = dateTime;
     });
   },
 );

  4. 详细文档请看:https://pub.dev/packages/flutter_cupertino_date_picker

  5. 该控件的github地址:https://github.com/dylanwuzh/flutter-cupertino-date-picker

  6. 详细代码请看:/flutter/21第三方日期控件/main.dart

23. 第三方轮播图组件flutter-swiper

  1. 第一步： 在pubspec.yaml配置flutter-swiper

     dependencies:
   flutter_swiper: ^1.1.6

  2. 第二步：导入控件,在demo.dart中引入包

     import 'package:flutter_swiper/flutter_swiper.dart';

  3. 结合文档，写入代码：

       body: new Swiper(
     itemBuilder: (BuildContext context,int index){
       return new Image.network("http://via.placeholder.com/350x150",fit: BoxFit.fill,);
     },
     itemCount: 3,
     pagination: new SwiperPagination(),
     control: new SwiperControl(),
   );

  4. 详细文档请看:https://pub.dev/packages/flutter_swiper

  5. 详细代码请看:/flutter/22第三方轮播图组件/demo.dart

24. 弹窗组件AlertDialog、SimpleDialog、showModalBottomSheet、flutter-toast第三方库

  1. AlertDialog
  2. SimpleDialog
  3. showModalBottomSheet
  4. flutter-toast
  5. 详细代码请看:/flutter/23弹窗组件AlertDialog、SimpleDialog、showModalBottomSheet、flutter-toast第三方库/main.dart

25. 自定义弹窗

  1. 其实就是继承Dialog类

  2. 设置定时器Timer.periodic，使用前需要引入 import 'dart:async';

  3. 详细代码请看:/flutter/24自定义弹窗、定时器/main.dart

26. 使用http库get、post获取数据

  1. Map与json之间的转换

    • Map转换为json,使用json.encode(data)

        import 'dart:convert';

  var mapData = {"name": "张三", "age": "20"}
  var strData = '{"name": "张三", "age": "20"}'
  print(json.encode(mapData))

    • json转换为Map,使用json.decode(data)

        import 'dart:convert';

  var mapData = {"name": "张三", "age": "20"}
  var strData = '{"name": "张三", "age": "20"}'
  print(json.decode(strData))

  2. http库get获取数据

  3. http库post获取数据

27. flutter状态管理库Provide

  1. 下载安装provide

     dependencies:
   provide: ^1.0.2

  2. 引入

     import 'package:provide/provide.dart';

  3. 创建provide

     新建一个provide文件夹，然后再里边新建一个demo.dart 文件.代码如下:
   import 'package:flutter/material.dart';

   class Demo with ChangeNotifier{
     int count = 0;

     add() {
       count ++;
       notifyListeners(); // 通知相关组件，内容改了
     }
   }

  4. 将状态放到最顶层main.dart中

     import 'package:provide/provide.dart';
 import './provide/counter.dart';

 void main(){
   var demo = Demo();
   var providers = Providers();
   providers..provide(Provider<Demo>.value(demo));
   runApp(
     ProviderNode(child: MyApp(), providers: providers)
   );
 }

  5. 在category/index.dart中获取状态,使用Provide的builder方法

     class Number extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
       margin: EdgeInsets.only(top: 200),
       child: Provide<Demo>(
         builder: (context, child, item){
           return Text('${item.count}');
         }
       )
     );
   }
 }

  6. 修改状态,使用provide的value方法调用写好的add

      class MyButton extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: RaisedButton(
          onPressed: (){
            Provide.value<Demo>(context).add();
          },
          child: Text('递增'),
        ),
      );
    }
  }

  7. 详细代码请看:/flutter/27flutter状态管理Provide/main.dart

28. 保持页面状态

  • AutomaticKeepAliveClientMixin这个Mixin就是Flutter为了保持页面设置的。哪个页面需要保持页面状态，就在这个页面进行混入。

  • 使用条件：

    1. 使用的页面必须是StatefulWidget,如果是StatelessWidget是没办法办法使用的。
    2. 其实只有两个前置组件才能保持页面状态：PageView和IndexedStack。
    3. 重写wantKeepAlive方法，如果不重写也是实现不了的。

  • 使用步骤：

    1. 需求是记住首页的状态，不要让他每次切换都调接口，在home/index.dart中

        混入AutomaticKeepAliveClientMixin，重写wantKeepAlive方法

  class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
  }

  class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {
      @override
    bool get wantKeepAlive => true;

    2. 在他的上层通过IndexedStack包裹起来(pages/index_page.dart)

        body: IndexedStack(
    index: currentIndex,
    children: tabBodies,
  ),

  • 详细代码请看:/flutter/28保持页面状态/main.dart

29. 使用flutter-swiper制作引导页

30. Provider状态管理

  • 使用Provider状态管理，类似于vuex和redux

  • 使用步骤：

    1. 在pubspec.yaml中下载provide

        dependencies:
    provide: ^1.0.2

    2. 新建provider文件夹，新建home.dart,写入以下代码：

        import 'package:flutter/material.dart';

  class HomeData with ChangeNotifier {
    Map dataSource = {};

    getHomeData(data){
      dataSource = data;
      notifyListeners();
    }
  }

    3. 在根目录main.dart下，注册Provider ``` import 'package:provide/provide.dart'; import 'package:app/provide/home.dart';

      void main(){ var home =HomeData(); var providers = Providers(); providers ..provide(Provider.value(home)); runApp(ProviderNode(child:Myapp(),providers:providers)); } ```

    4. 获取Provier里的值：使用Provide.value方法

        import 'package:provide/provide.dart';
  import 'package:app/provide/home.dart';

  Provide.value<HomeData>(context).dataSource['tabs'][0]['info']['tooltip'];

    5. 修改provider里的值：还是使用Provide.value方法

       import 'package:provide/provide.dart';
 import 'package:app/provide/home.dart';

 Provide.value<HomeData>(context).getHomeData(snapshot.data['data']); // 给provide赋值

    6. 详细代码请看:/flutter/30Provider状态管理/main.dart

31. flutter下拉刷新上拉加载easyRefresh

  1. 下载flutter_easyrefresh和flutter_localizations

      dependencies:
    flutter:
      sdk: flutter
    flutter_localizations:
      sdk: flutter

    flutter_easyrefresh: ^2.0.9

  2. 在页面中引入包

      import 'package:flutter_easyrefresh/easy_refresh.dart';

  3. 使用步骤：

    1. 定义控制器变量
  EasyRefreshController _controller;

2. 初始化
  void initState() {
    super.initState();
    _controller = EasyRefreshController(); // 初始化控制器
  }

3. 使用EasyRefresh()包裹你的列表,设置onLoad和onRefresh方法即可

  4. 国际化：

      在根路径main.dart中，引入：

  import 'package:flutter_easyrefresh/easy_refresh.dart';
  import 'package:flutter_localizations/flutter_localizations.dart';

  加入以下代码即可：
  localizationsDelegates: [
    GlobalEasyRefreshLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate
  ],
  supportedLocales: [
    Locale('zh', 'CN'),
  ],

  5. 详细代码请看:/flutter/31flutter下拉刷新上拉加载easyRefresh/index.dart

  6. 详细代码请看:/flutter/31flutter下拉刷新上拉加载easyRefresh/main.dart

  7. 详细文档请看:https://github.com/xuelongqy/flutter_easyrefresh

flutter打包成APK

  1. 配置APP的图标

    • 想配置APP的图片，你需要找到下面的目录：项目根目录/android/app/src/main/res/,进去之后，会看到mipmap-hdpi、mipmap-mdpi、mipmap-xhdpi、mipmap-xxhdpi、mipmap-xxxhdpi这5个文件夹，将你的图标放进去，注意图标的名称必须相同

    • 找到/android/app/src/main/AndroidManifest.xml文件，可以配置APP的名称、图标

        android:label="flutter_app"   //配置APP的名称，支持中文
  android:icon="@mipmap/ic_launcher" //APP图标的文件名称

  2. 生成keystore

    • 在项目当前目录下输入命令： keytool -genkey -v -keystore C:/Users/ASUS/Desktop/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

  3. 在Android文件夹下，新建key.properties，并写入前面的密码

      storePassword=123123
  keyPassword=123123
  keyAlias=key
  storeFile=C:/Users/ASUS/Desktop/key.jks

  4. 找到android/app/build.gradle文件，修改此文件

    • 修改1
    • 修改2

  5. 以上都搞定之后，执行flutter build apk

  6. 如果打包成功了，会在build/app/outputs/apk/release文件夹下，生成app-release.apk，然后在当前目录下执行flutter install就打包完成

  7. 详细文档请看:https://jspang.com/detailed?id=44#toc324

  8. 详细文档请看:https://blog.csdn.net/duo_shine/article/details/81382757

flutter适配不同设备尺寸

  • 使用插件：flutter_screenutil

    • 下载：

      在pubslipec.yaml里：

  dependencies:
    flutter_screenutil: ^1.0.2

    • 引入：

        import 'package:flutter_screenutil/flutter_screenutil.dart';

    • 使用：

        1.在根组件初始化设计尺寸：ScreenUtil.init(context, width: 750, height: 1334, allowFontScaling: true);

  2. 在需要的地方，使用setHeight(), setWisth()设置宽高
  height: ScreenUtil().setHeight(333),

日常开发经验总结

1. appBar部分

  1. 如何去掉appBar的底部阴影 如何去掉appBar的底部阴影 ``` elevation: 0 加上这个属性就可以去掉底部的阴影

    @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('我的'), backgroundColor: Colors.deepOrange, elevation: 0, //去掉Appbar底部阴影 ), body: Column( children: [ Row( children: [MineHead()], ) ], )); } ```

  2. 如何给appbar添加颜色渐变 使用flexibleSpace属性 appBar: AppBar( flexibleSpace: Container( // 设置渐变色 decoration: BoxDecoration( gradient: LinearGradient(colors: [ Color.fromRGBO(253, 99, 52, 1), Color.fromRGBO(253, 52, 52, 1) ])), ), )

  3. 实现以下布局

    • 导航不在appBar
      # 布局思路
    * appBar是第一行，搜索框放到body里的，tabbar和tabbarView都在body里，而不是在appBar里

  # 注意
    TabBarView必须要求高度要确定，结合Expanded组件一起使用，不然会报错

  # 导航有滚动是设置isScrollable: true,

  4. tabBar的动态渲染及循环

    • 注意：

      1. 使用FutureBuilder异步渲染组件的时候，不能在组件或者build中使用setState会报错

      2. 在获取到tab的数据后，他是个数组，循环只能用for循环，不能用map，因为数据返回的数组不是List，而是List

      3. 使用FutureBuilder的时候，tabBar的tabController不要定义在initState中,而是把它定义在FutureBuilder中

        body: FutureBuilder(
    future: request('home', 'post'), 
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        // 处理数据
        var tabsArr = snapshot.data['data']['tabs']; // 类型不是List<Map>，是List<dynamic>
        // 初始化tabBar的控制
        _tabController = new TabController(length: tabsArr.length, vsync: this);
        _tabController.addListener(() {
          print(_tabController.index);
        });

        return Column(
            children: <Widget>[
              SearchComponent(),
              Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(colors: [
                  Color.fromRGBO(253, 99, 52, 1),
                  Color.fromRGBO(253, 52, 52, 1)
                ])),
                child: TabBar(
                    isScrollable: true,
                    controller: _tabController,
                    tabs: this._getTabsData(tabsArr)),
              ),

  // 渲染tab
  _getTabsData(tabsArr) {
    List<Widget> list = new List();
    for(int i=0; i<tabsArr.length;i++) { // 只能用for循环
      list.add(Tab(text: tabsArr[i]['title']));
    }
    print(list);
    return list;
  }

    • 详细代码请看:/flutter/布局例子/tabBar的动态渲染及循环、FutureBulder的用法/main.dart

  5. 实现以下布局

    • 一行两列的列表

    • 注意：一行多列的布局，要使用wrap流式布局，而不是GridView，原因是GridView要指定高度，这样滚动区域就只能在这个高度中

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.