Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter入门(二)

Flutter入门(二)

作者头像
用户3112896
发布于 2019-12-27 10:41:53
发布于 2019-12-27 10:41:53
62000
代码可运行
举报
文章被收录于专栏:安卓圈安卓圈
运行总次数:0
代码可运行

* 网格布局

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  List<Widget> _getListData() {
    var tempList = listData.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(
              height: 10,
            ),
            Text(
              value['title'],
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
          color: Colors.yellow,
          width: 1,
        )),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return GridView.count(
      crossAxisSpacing: 20.0, //水平子Widget之间间距
      mainAxisSpacing: 20.0, //垂直子Widget之间间距
      padding: EdgeInsets.all(10),
      crossAxisCount: 2, //一行的Widget数量
      // childAspectRatio: 0.7, //宽度和高度的比例
      children: this._getListData(),
    );
  }
}

效果图

优化

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  Widget _getListData(context, index) {
    return Container(
      child: Column(
        children: <Widget>[
          Image.network(listData[index]['imageUrl']),
          SizedBox(
            height: 10,
          ),
          Text(
            listData[index]['title'],
            textAlign: TextAlign.center,
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
      decoration: BoxDecoration(
          border: Border.all(
        color: Colors.yellow,
        width: 1,
      )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisSpacing: 10.0, //水平子Widget之间间距
        mainAxisSpacing: 10.0, //垂直子Widget之间间距
        crossAxisCount: 2, //一行的Widget数量
      ),
      itemCount: listData.length,
      itemBuilder: this._getListData,
    );
  }
}

* Padding(个人感觉和Container很像)(下面的代码很难看,重要的是思路)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1.7,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/1.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/2.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/3.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/4.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/5.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/6.png',
                fit: BoxFit.cover,
              ),
            ),
            Padding(
              padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
              child: Image.network(
                'https://www.itying.com/images/flutter/7.png',
                fit: BoxFit.cover,
              ),
            ),
          ],
        ));
  }
}

效果图

* Row横向排序(Column同理)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400.0,
      width: 300.0,
      color: Colors.yellow,
      padding: EdgeInsets.all(10),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.blue),
          IconContainer(Icons.search, color: Colors.red),
          IconContainer(Icons.select_all, color: Colors.orange)
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  Color color;
  IconData icon;
  IconContainer(this.icon, {this.color = Colors.red, this.size = 30.0});
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 80.0,
      width: 80.0,
      color: this.color,
      child: Center(
        child: Icon(
          this.icon,
          size: this.size,
          color: Colors.white,
        ),
      ),
    );
  }
}

效果图

* 复杂布局

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
              child: Container(
            height: 200,
            color: Colors.black,
            child: Text('你好Flutter'),
          ))
        ],
      ),
      SizedBox(height: 10),
      Row(children: <Widget>[
        Expanded(
            flex: 2,
            child: Container(
                height: 180,
                child: Image.network(
                    'https://www.itying.com/images/flutter/1.png',
                    fit: BoxFit.cover))),
        SizedBox(width: 10),
        Expanded(
            flex: 1,
            child: Container(
                height: 180,
                child: ListView(
                  children: <Widget>[
                    Container(
                        height: 85,
                        child: Image.network(
                            'https://www.itying.com/images/flutter/2.png',
                            fit: BoxFit.cover)),
                    SizedBox(height: 10),
                    Container(
                        height: 85,
                        child: Image.network(
                            'https://www.itying.com/images/flutter/3.png',
                            fit: BoxFit.cover)),
                  ],
                )))
      ])
    ]);
  }
}

效果图

* Stack+Align

Stack(类似android的relativelayout)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topLeft,
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Align(
              alignment: Alignment.center,
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Icon(Icons.settings_applications,
                  size: 60, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

* Stack+Positioned

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 400,
        width: 300,
        color: Colors.red,
        child: Stack(
          children: <Widget>[
            Positioned(
              left: 10, //距离左边10
              child: Icon(Icons.home, size: 40, color: Colors.white),
            ),
            Positioned(
              bottom: 0, //距离左边0
              left: 100, //距离左边100
              child: Icon(Icons.search, size: 30, color: Colors.white),
            ),
            Positioned(
              right: 0, //距离右边0
              child: Icon(Icons.settings_applications,
                  size: 60, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

效果图

* AspectRatio宽高比组件

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 3.0 / 1.0, //宽高比
      child: Container(
        color: Colors.red,
      ),
    );
  }
}

效果图

* 卡片

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  '张三',
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text('高级工程师'),
              ),
              ListTile(
                title: Text("电话:xxxxx"),
              ),
              ListTile(
                title: Text("地址:xxx"),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text(
                  '王五',
                  style: TextStyle(fontSize: 28),
                ),
                subtitle: Text('高级工程师'),
              ),
              ListTile(
                title: Text("电话:xxxxx"),
              ),
              ListTile(
                title: Text("地址:xxx"),
              )
            ],
          ),
        ),
      ],
    );
  }
}

效果图

* 图文卡片

listData.dart

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
List listData = [
  {
    "title": 'zhangsan',
    "author": 'alibaba',
    "imageUrl": 'https://www.itying.com/images/flutter/1.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'lisi',
    "author": 'huawei',
    "imageUrl": 'https://www.itying.com/images/flutter/2.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'wangwu',
    "author": 'wangyi',
    "imageUrl": 'https://www.itying.com/images/flutter/3.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'zhaoliu',
    "author": 'jinritoutiao',
    "imageUrl": 'https://www.itying.com/images/flutter/4.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'qixi',
    "author": 'dajiang',
    "imageUrl": 'https://www.itying.com/images/flutter/5.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'batiao',
    "author": 'tengxun',
    "imageUrl": 'https://www.itying.com/images/flutter/6.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
  {
    "title": 'jiubing',
    "author": 'weixin',
    "imageUrl": 'https://www.itying.com/images/flutter/7.png',
    "discription": 'flutter is google‘s mobile UI framework',
  },
];
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter Demo')),
        body: HomeContent(),
      ),
      theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: listData.map((value) {
        return Card(
          margin: EdgeInsets.all(10),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(value["imageUrl"], fit: BoxFit.cover),
              ),
              ListTile(
                leading: CircleAvatar(
                    //头像组件
                    backgroundImage: NetworkImage(value["imageUrl"])),
                title: Text(value["title"]),
                subtitle: Text(
                  value["discription"],
                  overflow: TextOverflow.ellipsis,
                ),
              )
            ],
          ),
        );
      }).toList(),
    );
  }

效果图很好看

* Wrap 流布局

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      // direction: Axis.vertical,//竖直排列
      alignment: WrapAlignment.start,
      children: <Widget>[
        MyButton("斗罗大陆"),
        MyButton("遮天"),
        MyButton("盗墓笔记"),
        MyButton("天龙八部"),
        MyButton("凡人修仙传"),
        MyButton("大主宰"),
        MyButton("仙逆"),
        MyButton("斗鱼"),
        MyButton("校花的贴身高手"),
        MyButton("酒神"),
        MyButton("最好的我们"),
      ],
    );
  }
}

class MyButton extends StatelessWidget {
  final String text;
  MyButton(this.text);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: () {},
    );
  }
}

效果图

欢迎关注我的微信公众号:安卓圈

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 安卓圈 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Flutter组件随笔练习
Container组件 import 'package:flutter/material.dart'; //快捷方式:fim void main() { runApp(MyApp()); } //自定义组件 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp(
明知山
2020/09/02
1K0
Flutter入门(一)
Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases
用户3112896
2019/12/27
7520
Flutter入门(一)
Flutter 中 Padding、Row 、Column 、Expanded 组件详解
在 html 中常见的布局标签都可以使用 padding 属性,但是 Flutter 中很多 Widget 是没有 padding 属 性,这个时候我们可以用 Padding 组件处理容器与子元素直接的间距。
越陌度阡
2020/12/22
1.9K0
Flutter 中 Padding、Row 、Column 、Expanded 组件详解
Flutter中AspectRatio、Card 卡片组件
AspectRatio 首先会在布局限制条件允许的范围内尽可能的扩展,widget 的高度是由宽度和比率决定的,类似于 BoxFit 中的 contain,按照固定比率去尽量占满区域。
越陌度阡
2020/12/23
1.9K0
Flutter中AspectRatio、Card 卡片组件
Flutter中ListView 垂直列表组件、水平列表组件
列表布局是项目开发中最常用的一种布局方式,Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示。
越陌度阡
2022/05/06
1.7K0
Flutter中ListView 垂直列表组件、水平列表组件
Flutter 中 ListView 垂直列表组件、水平列表组件
列表布局是项目开发中最常用的一种布局方式,Flutter 中我们可以通过 ListView 来定义列表项,支持垂直和水平方向展示。
越陌度阡
2020/12/21
2.2K0
Flutter 中 ListView 垂直列表组件、水平列表组件
Padding、Row、Column、Expanded、Stack、AspectRatio、Card、Wrap等布局组件初体验
在HTML中,常见的布局标签都有padding属性,但是在Flutter中,很多的widget是没有padding属性的。这时我们就可以使用padding组件来处理容器与子元素之间的间距。
拉维
2019/08/12
8110
Padding、Row、Column、Expanded、Stack、AspectRatio、Card、Wrap等布局组件初体验
Flutter入门(四)
自定义的好处是可以在addListener中增加监听,通过setState修改状态
用户3112896
2019/12/27
1.5K0
Flutter中GridView网格列表组件的使用
当数据量很大的时候用矩阵方式排列比较清晰,此时我们可以用网格列表组件 GridView 实现布局。
越陌度阡
2022/05/06
4K0
Flutter中GridView网格列表组件的使用
flutter基础布局代码
骨灰级别的基础代码,只是做个简单的记录,方便以后看 都是用dart写的,都在flutter项目下的lib文件夹下 import 'package:flutter/material.dart'; import './tomFont.dart'; void main() { runApp( MaterialApp( theme: ThemeData( primarySwatch: Colors.yellow, ), home: Scaffold(
Tom2Code
2023/02/14
7570
flutter基础布局代码
Flutter 中 ListView 动态数据生成列表
1. 循环数据,生成列表效果。 import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } // 抽离成一个单独的组件 class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold(
越陌度阡
2020/12/22
3.6K0
Flutter 中 ListView 动态数据生成列表
Flutter组件学习(二)—— Image
上一节中,我们讲了 Flutter 中 Text 组件的一些用法以及 API,本节我们继续学习 Flutter 中的 Image 组件,同样先上图:
用户2802329
2018/12/21
1.5K0
Flutter 中 GridView网格列表组件的使用
当数据量很大的时候用矩阵方式排列比较清晰,此时我们可以用网格列表组件 GridView 实现布局。
越陌度阡
2020/12/22
4.1K0
Flutter 中 GridView网格列表组件的使用
4.Flutter中的ListView的用法。
我们先来看看代码,从代码中可以看到我们只给Contaniner组件设置宽高,按照我们所想,应该呈现出来的是宽高为100的一个正方形Item,但是该代码运行结果如下图所示:
易帜
2022/02/09
1.8K0
4.Flutter中的ListView的用法。
Flutter GridView 使用
今天学习一下在Flutter中怎么使用GridView,效果如上图。 头部是一个Banner,使用的是第三方的
赵哥窟
2019/09/20
2.3K0
Flutter GridView 使用
Flutter中的抽屉组件Drawer
1. decoration 装饰。可用于设置背景颜色和图片,值的类型为BoxDecoration;
越陌度阡
2020/12/29
2.3K0
【Flutter 16】图解 ListView 异步加载数据与 Loading 等待
和尚前两天再学 ListView 时,整理了一下在列表中展示多种不同 item 样式,今天继续深入学习异步请求数据并加载新闻列表以及初始进入页面的 loading 等小知识点。暂时还没有学习下拉刷新与上划加载更多。
阿策小和尚
2019/08/12
3.7K0
【Flutter 16】图解 ListView 异步加载数据与 Loading 等待
利用Flutter中的ListView进行动态卡片布局
真香!本来觉得用以前的java就能做的为啥还用flutter,但是最近接触flutter之后感觉这才是写移动应用的神器啊! 尤其是用java写的listView,各种适配器传参简直了
徐建国
2021/07/31
2.3K0
8.Flutter学习之AspectRatio、Card组件
AspectRatio的作用是根据设置调整子元素child的宽高比 AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展,widget的高度是由宽度和比率确定的,按照固定比例去尽量占满区域。 在满足所有限制条件后无法找到一个可行的尺寸,AspectRatio最终将会去优先适应布局限制条件,而忽略所设置的比例。
易帜
2022/02/09
7050
8.Flutter学习之AspectRatio、Card组件
Flutter入门(五)
国际化方案http://bbs.itying.com/topic/5cfb2a12f322340b2c90e764
用户3112896
2019/12/30
1K0
相关推荐
Flutter组件随笔练习
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验