Flutter Map的基本使用

这篇具有很好参考价值的文章主要介绍了Flutter Map的基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们先点进Map中查看代码:

flutter map,flutter

可以看到这里需要两个值分别是 K和V

关于Map对象,通过{}初始化Map对象,每个元素形式为Key:Value

键(Key)和值(Value)之间使用冒号" : "分割

元素之间使用分号";"分割

基本使用方式:

Map student = {1: "Tm1", 2: "Jr1", 3: "spk1"};
  print(student); //{1: Tm, 2: Jr, 3: spk}

  先创建Map 对象在进行赋值

Map president = {};
  president[1] = "Tm2";
  president[2] = "Jr2";
  president[3] = "spk2";

  print(president); //{1: Tm2, 2: Jr2, 3: spk2}

常见属性:

  Map map1 = Map();
  map1["map1"] = 1;
  map1["map2"] = 2;
  map1["map3"] = 3;
  print(map1.length); //长度
  print(map1.isEmpty); //是否为空
  print(map1.isNotEmpty); //是否不为空

常见方法:

 //常见使用方法

  //新增一个键值对
  Map<String, int> map2 = Map();
  map2["map1"] = 1;
  print(map2); //{a8: 1}

  //改变一个键值对
  map2['a8'] = 2;
  print(map2); //{a8: 2}

map还可以这样使用:

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
            children: [
      Container(
        color: Colors.blue,
        width: 100,
        height: 100,
      ),
      Container(
        color: Colors.green,
        width: 100,
        height: 100,
      ),
      Container(
        color: Colors.red,
        width: 100,
        height: 100,
      )
    ].map((Widget widget) {
      return SizedBox(
        child: widget,
      );
    }).toList()));
  }
}

这时候我们就可以一起管理了,减少多余代码,更加优雅简洁

有时候我们需要分别管理,例如1,2需要改变,  3,4又有其他改变,这时候我们可以这样做文章来源地址https://www.toymoban.com/news/detail-543611.html



class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  _MyApp1State createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
          children: [
        Container(
          key: ValueKey('1'),
          width: 500,
          height: 500,
          color: Colors.green.withOpacity(.2),
        ),
        Container(
          key: ValueKey('2'),
          width: 500,
          height: 500,
          color: Colors.red.withOpacity(.2),
        ),
        Container(
          key: ValueKey('3'),
          width: 500,
          height: 500,
          color: Colors.blue.withOpacity(.2),
        ),
      ].map((Widget widget) {
        double w = 100;
        double h = 100;
        if (widget.key == Key('1')) {
          w = 50;
          h = 50;
        } else if (widget.key == Key('2')) {
          w = 100;
          h = 100;
        } else if (widget.key == Key('3')) {
          w = 150;
          h = 150;
        }
        return SizedBox(
          width: w,
          height: h,
          child: widget,
        );
      }).toList()),
    );
  }
}

到了这里,关于Flutter Map的基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【C++】详解map和set基本接口及使用

    关联式容器也是用来存储数据的,但与序列式容器不同的是,关联式容器里面存储的是 key, value 结构的键值对,因此**在数据检索时比序列式容器效率更高**。 键值对是用来表示 具有一一对应关系的一种结构 ,该结构中一般只包含两个成员变量 – key 和 value;其中 key 代表键

    2024年02月08日
    浏览(44)
  • Vue中 Vue-Baidu-Map基本使用

    前言 但我们遇到一项新技术或者没有写过的东西为了不走弯路我们只能先去模仿或者看官方文档 Vue这个框架相信大家都熟悉,只要是需要用的第三方平台它一般都会进行集成,比如Vue-Baidu-map 为什么有百度原生api为什么还需要插件,因为使用插件它是向Vue方向看齐的这样省去

    2024年02月03日
    浏览(43)
  • flutter的CircularProgressIndicator基本使用

    循环进度指示器视图 循环进度指示器视图。 在页面绘制一个循环进度指示器视图。 无限循环指示器 能显示进度的指示器 设置了value就会让指示器固定到对应比例的长度 可以用于下载时显示进度,更新value的值并且setstate重绘制即可

    2024年02月05日
    浏览(31)
  • 深入理解 go sync.Map - 基本原理

    我们知道,go 里面提供了 map 这种类型让我们可以存储键值对数据,但是如果我们在并发的情况下使用 map 的话,就会发现它是不支持并发地进行读写的(会报错)。 在这种情况下,我们可以使用 sync.Mutex 来保证并发安全,但是这样会导致我们在读写的时候,都需要加锁,这

    2024年01月18日
    浏览(41)
  • 数据结构map的基本知识与用法

    映射类似于函数的对应关系,每个 x 对应一个 y ,而 map 是每个键对应一个值。会python的朋友学习后就会知道这和python的字典非常类似。 比如说:学习 对应 看书,学习 是键,看书 是值。 学习-看书 玩耍 对应 打游戏,玩耍 是键,打游戏 是值。 玩耍-打游戏          Cp

    2024年02月20日
    浏览(34)
  • 【C++】容器篇(五)—— map和set的基本介绍

    序言: 在之前,我们已经对STL中的 序列式容器 进行了相关的学习。本期,我将给大家介绍的则是另外一类容器 ——  关联式容器 !!! 目录 (一)容器回顾 💨【顺序容器】 💨【关联式容器】 💨【容器适配器】 (二)键值对 (三)树形结构的关联式容器 1、set  1️⃣

    2024年02月14日
    浏览(35)
  • Flutter中的基本组件

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Text组件(简单样式文本框组件)用于显示简单的样式文本,它的常用属性如下表所示。 TextStyle的常用属性如下表所示。 RichText组件(丰富文本组件)是Flutter提供的一个可以展示多种样式的Widget,经常应用

    2024年02月04日
    浏览(35)
  • Flutter框架中,组件间传值的基本方式

    1.构造函数传值 在创建widget时,可以通过构造函数将参数传递给子widget。例如: 2.回调函数传值 父widget可以在创建子widget时,传递一个回调函数,当子widget需要把值传给父widget时,就调用这个回调函数。例如: 3.InheritedWidget传值 InheritedWidget是Flutter框架提供的一种特殊的wid

    2024年02月09日
    浏览(42)
  • 【ES6 Map数据结构】建议日常开发操作数组时使用 new Map

    算法使用 Map 还算是不少的,日常开发也可使用 new Map 替代某些数组操作,活到老学到老 JavaScript的对象 (Object) ,本质上是键值对的集合 (Hash结构) ,但是传统上只能用字符串当作键。这给它的使用带来了很大的限制 为了解决这个问题,ES6提供了Map数据结构。它类似于对

    2024年01月17日
    浏览(45)
  • 小程序使用map

    直接使用map标签,其他配置参考wx文档map, 下面代码只作举例 wxml:  wxss: js:  先看实测效果图: 那么就开始枯燥无味的走流程了: 首先要获取到腾讯位置服务的key码:   腾讯位置服务 - 立足生态,连接未来 登陆注册之后点击 找到 应用管理-我的应用; 创建应用:  创建完

    2024年02月06日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包