Flutter劫富济贫计划（二）——flutter页面布局实战

最新推荐文章于 2024-04-17 09:29:19 发布
最新推荐文章于 2024-04-17 09:29:19 发布
阅读量243 收藏
点赞数 1
分类专栏： Flutter 文章标签： Flutter消息列表页面Card布局 Flutter布局实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38774121/article/details/103008637
版权
消息列表页面

这里提供两种方法完成的该消息列表

  • Card控件布局完成
  • 自定义消息列表

下图只是Card布局展示，可以自己更换一下控件在这里插入图片描述

代码

import 'package:flutter/material.dart';
import 'package:project/plugins/ScreenAdapter.dart';

class ChatPage extends StatelessWidget {



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Container(
            margin: EdgeInsets.only(right: ScreenAdapter.setWidth(100)),
            child: Align(
              child: Text('消息(3)'),
              alignment: Alignment.center,
            ),
          ),
          elevation: 10,
        ),
        body: Container(
          color: Color.fromRGBO(233, 232, 233, 0.9),
          child: ListView(
            children: <Widget>[
              Container(
                height: ScreenAdapter.setHeight(180),
                margin: EdgeInsets.all(ScreenAdapter.setWidth(15)),
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(7)),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    socketTitle('官方消息', Icons.local_play),
                    // CustomerService()
                    CardCustomerServiceWidget()
                  ],
                ),
              ),
              Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(8)),
                child: Column(
                  children: <Widget>[
                    socketTitle('消息', Icons.message),
                    CardWidget()
                    // socketInformation()
                  ],
                ),
              )
            ],
          ),
        ));
  }
}

// 消息类型
Widget socketTitle(String title, icon) {
  return Container(
    margin: EdgeInsets.all(ScreenAdapter.setWidth(7)),
    padding: EdgeInsets.all(ScreenAdapter.setWidth(10)),
    child: Row(
      children: <Widget>[
        Icon(icon, color: Color.fromRGBO(200, 200, 200, 1)),
        SizedBox(
          width: ScreenAdapter.setWidth(20),
        ),
        Text(
          title,
          style: TextStyle(
              fontSize: ScreenAdapter.size(30),
              color: Color.fromRGBO(200, 200, 200, 1)),
        )
      ],
    ),
  );
}

// Card消息列表
Widget CardWidget(){
  List<Map> messageData = [
    {
      'username': '马云',
      'img':
          'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0003b03088b1cb133e693b15e56f3173/0bd162d9f2d3572c257447038f13632763d0c35f.jpg',
      'message': '在吗？我不想要阿里了，给你了，给我个准信',
      'time': '16:34',
      'isNew':true
    },
    {
      'username': '王健林',
      'img':
          'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/70e53284e7e606e1bc9a230047e0c39b_342_194.jpg',
      'message': '我错了，我当初就应该听你的选择，现在我负债，真的很难受，你能帮帮我嘛',
      'time': '12:05',
      'isNew':false
    },
    {
      'username': '李彦宏',
      'img':
          'https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/2f738bd4b31c8701928251782d7f9e2f0708ff7c.jpg',
      'message': '关于公司转让合同事情，我这边已经办好了，老板，你还有什么吩咐的吗',
      'time': '2019/11/09',
      'isNew':true,
    },
    {
      'username': '马化腾',
      'img':
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=6894791,377714950&fm=85&app=52&f=JPEG?w=121&h=75&s=8E9B834D6E134DD4022261B30300C04A',
      'message': '大哥，腾讯有您的存在，真是蓬荜生辉啊，你啥时候回来啊',
      'time': '16:34',
      'isNew':false
    },
    {
      'username': '雷军',
      'img':
          'https://ss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2830014756,2720188277&fm=74&app=80&f=JPEG&size=f121,140?sec=1880279984&t=a4b65f189e2a899d5ea6a1ce96d6af37',
      'message': '对不起之前是我有眼不识泰山，我想加入你们',
      'time': '2019/11/05',
      'isNew':false
    },
    {
      'username': '柳传志',
      'img':
          'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1870688149,1160460193&fm=74&app=80&f=JPEG&size=f121,140?sec=1880279984&t=b6ac84101979a58e5a0168e0c2f4bd5a',
      'message': '小弟不才，怎敢让您在我这里学习呢',
      'time': '2019/11/02',
      'isNew':false
    },
  ];

  return Container(
    child: Column(
      children: messageData.map((value){
        return Card(
          elevation:0.5,
          shape: const RoundedRectangleBorder(//形状
              //修改圆角
              borderRadius: BorderRadius.all(Radius.circular(1)),
            ),
          child:ListTile(
                 dense: true,
                  leading: Container(
                    width: ScreenAdapter.setWidth(100),
                    height: ScreenAdapter.setHeight(80),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image.network(
                          value['img'],
                          fit: BoxFit.cover)),
                  ),
                  title: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(value['username'], style: TextStyle(fontSize: 20.0)),
                      Text(value['time'], style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.w300)),
                    ],
                  ),
                  subtitle: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Container(
                        width: ScreenAdapter.setWidth(450),
                        child: Text(value['message'],maxLines: 1, overflow: TextOverflow.ellipsis,),
                      ),
                      value['isNew'] ? 
                      ClipOval(
                        child: Container(
                          width:ScreenAdapter.setWidth(35),
                          height: ScreenAdapter.setHeight(30),
                          color:Colors.redAccent,
                          child: Align(
                            alignment: Alignment.center,
                            child: Text('10',style: TextStyle(color: Colors.white), textAlign: TextAlign.center,),
                          )
                        ),
                      )  
                      : 
                      Text('')
                    ],
                  ),
                ),
        );
      }).toList()
    ),
  );
}
// Card官方消息
Widget CardCustomerServiceWidget(){

  return Container(
    child: Card(
          elevation:0,
          child:ListTile(
                 dense: true,
                  leading: Container(
                    width: ScreenAdapter.setWidth(100),
                    height: ScreenAdapter.setHeight(80),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image.network(
                          'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1238416336,2316303066&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=0902247d162479f35d9445269958e5b8',
                          fit: BoxFit.cover)),
                  ),
                  title: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text('App客服', style: TextStyle(fontSize: 20.0)),
                      Text('10:00', style: TextStyle(fontSize: 10.0, fontWeight: FontWeight.w300)),
                    ],
                  ),
                  subtitle: Text('恭喜你获得满199减100，购品质沙龙的骄傲是降低为',maxLines: 1, overflow: TextOverflow.ellipsis,),
                ),
        )
  );
}



// 自定义消息列表
Widget socketInformation() {
  List<Map> messageData = [
    {
      'username': '马云',
      'img':
          'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=0003b03088b1cb133e693b15e56f3173/0bd162d9f2d3572c257447038f13632763d0c35f.jpg',
      'message': '在吗？我不想要阿里了，给你了，给我个准信',
      'time': '16:34'
    },
    {
      'username': '王健林',
      'img':
          'https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/70e53284e7e606e1bc9a230047e0c39b_342_194.jpg',
      'message': '我错了，我当初就应该听你的选择，现在我负债，真的很难受，你能帮帮我嘛',
      'time': '12:05'
    },
    {
      'username': '李彦宏',
      'img':
          'https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/baike/pic/item/2f738bd4b31c8701928251782d7f9e2f0708ff7c.jpg',
      'message': '关于公司转让合同事情，我这边已经办好了，老板，你还有什么吩咐的吗',
      'time': '2019/11/09'
    },
    {
      'username': '马化腾',
      'img':
          'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=6894791,377714950&fm=85&app=52&f=JPEG?w=121&h=75&s=8E9B834D6E134DD4022261B30300C04A',
      'message': '大哥，腾讯有您的存在，真是蓬荜生辉啊，你啥时候回来啊',
      'time': '16:34'
    },
    {
      'username': '雷军',
      'img':
          'https://ss1.bdstatic.com/6OF1bjeh1BF3odCf/it/u=2830014756,2720188277&fm=74&app=80&f=JPEG&size=f121,140?sec=1880279984&t=a4b65f189e2a899d5ea6a1ce96d6af37',
      'message': '对不起之前是我有眼不识泰山，我想加入你们',
      'time': '2019/11/05'
    },
    {
      'username': '柳传志',
      'img':
          'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1870688149,1160460193&fm=74&app=80&f=JPEG&size=f121,140?sec=1880279984&t=b6ac84101979a58e5a0168e0c2f4bd5a',
      'message': '小弟不才，怎敢让您在我这里学习呢',
      'time': '2019/11/02'
    },
  ];



  if (messageData != null) {
    print(messageData is List);
    return Container(
      child: Column(
        children: messageData.map((value){
          return Container(
          margin: EdgeInsets.all(ScreenAdapter.setWidth(7)),
          padding: EdgeInsets.all(ScreenAdapter.setWidth(10)),
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  height: ScreenAdapter.setHeight(80),
                  // color: Colors.red,
                  child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: Image.network(
                          value['img'],
                          fit: BoxFit.cover)),
                ),
              ),
              Expanded(
                  flex: 6,
                  child: Container(
                    padding: EdgeInsets.only(left: ScreenAdapter.setWidth(20)),
                    height: ScreenAdapter.setHeight(80),
                    child: Column(
                      // crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: <Widget>[
                            Text(
                              value['username'],
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            Text(value['time'],
                                style: TextStyle(
                                  color: Colors.grey,
                                ))
                          ],
                        ),
                        Row(
                          children: <Widget>[
                            Container(
                              width: ScreenAdapter.setWidth(500),
                              child: Text(value['message'],
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                  style: TextStyle(color: Colors.grey)),
                            )
                          ],
                        )
                        
                      ],
                    ),
                  )),
            ],
          ),
        );
        }).toList()
      ),
    );
  } 
}

// 自定义官方消息
Widget CustomerService(){
  return Container(
      margin: EdgeInsets.all(ScreenAdapter.setWidth(7)),
      padding: EdgeInsets.all(ScreenAdapter.setWidth(10)),
      child: Row(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              height: ScreenAdapter.setHeight(80),
              // color: Colors.red,
              child: ClipRRect(
                  borderRadius: BorderRadius.circular(10),
                  child: Image.network(
                      'https://ss0.bdstatic.com/6Ox1bjeh1BF3odCf/it/u=1238416336,2316303066&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=0902247d162479f35d9445269958e5b8',
                      fit: BoxFit.cover)),
            ),
          ),
          Expanded(
              flex: 6,
              child: Container(
                padding: EdgeInsets.only(left: ScreenAdapter.setWidth(20)),
                height: ScreenAdapter.setHeight(80),
                child: Column(
                  // crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          'APP客服',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text('10:00',
                            style: TextStyle(
                              color: Colors.grey,
                            ))
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          width: ScreenAdapter.setWidth(500),
                          child: Text('恭喜你获得满199减100，购品质沙龙的骄傲是降低为',
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                              style: TextStyle(color: Colors.grey)),
                        )
                      ],
                    )
                  ],
                ),
              )),
        ],
      ),
    );
}
磐石BedRock
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 页面布局 Wrap组件
01-07
Wrap组件实现流布局 //导入了Material UI组件库 ,快捷操作fim import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } //自定义组件 //StatelessWidget:无状态组件，状态不可变的widget //...
【Flutter入门到进阶】Flutter基础篇---布局
Yvan
03-01 2620
GridView网格布局在实际项目中用的也是非常多的，当我们想让可以滚动的元素使用矩阵方式排列的时 候。此时我们可以用网格列表组件GridView实现布局GridView创建网格列表主要有下面三种方式1、可以通过GridView.count 实现网格布局2、可以通过GridView.extent 实现网格布局3、通过GridView.builder实现动态网格布局。
Flutter 布局详解
金戈鐡馬
03-04 1524
Flutter中的边界约束，是指widget可以按照指定限定条件，来决定自身如何占用布局空间。Flutter借鉴了很多React相关的东西，包括一些布局思想，但是它自身没有抽离出布局样式，而是用不同的widget去实现不同的布局，将样式嵌入widget中，用户可以像搭积木一样写布局，写法上跟React很像，只不过没了样式的设定。 这样做的好处，我觉得可能是为了统一的渲染。加入样式，会让布局复杂不少，在渲染层面会降低很多性能。因此，Flutter在大的方向上，加入不同类型的布局widget。在小的方向上，只给
劫富济贫
MrTinTin的博客
08-29 324
https://nanti.jisuanke.com/t/16618 字典树维护即可。 #include #include #include #include #define N 1000010 using namespace std; char s[N]; int ch[N][27],w[N],cnt=1; void addnew(int W) { int n=strlen(s),
Flutter 布局构建
旭日的博客
07-04 1519
布局类组件就是指直接或间接继承(包含)和的Widget，它们一般都会有一个child或children属性用于接收子 Widget。我们看一下继承关系。布局组建列表Widget说明用途非容器类组件基类Widget树的叶子节点，用于没有子节点的widget，通常基础组件都属于这一类，如Image。单子组件基类包含一个子Widget，如：ConstrainedBox、DecoratedBox等多子组件基类包含多个子Widget，一般都有一个children参数，接受一个Widget数组。
Flutter布局详解，必知必会，项目实战
m0_61068496的博客
03-21 2414
30545)][外链图片转存中…(img-GikYdPvH-1710967430545)][外链图片转存中…(img-qhcqUMdk-1710967430546)][外链图片转存中…(img-HAS1gqNX-1710967430546)]
flutter弹起键盘页面布局超限问题
01-20
这是由于页面高度写死导致的， 1.scaffold 根布局添加 resizeToAvoidBottomPadding:false 是否自动调整body属性控件的大小，以避免脚手架底部被覆盖。例如，如果在脚手架上方显示屏幕键盘，则可调整body属性控件的...
Flutter页面布局之Stack层叠组件
01-08
Stack表示堆的意思，我们可以使用Stack或者结合Align或Positond实现定位布局 Stack常用属性： 属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子...
Flutter之商用项目实战——直播回放
06-17
【Flutter之商用项目实战——直播回放】是一个深入探讨如何使用Flutter进行商用项目开发的教程。Flutter是由Google推出的开源UI工具包，旨在帮助开发者构建高性能、高保真度的跨平台移动应用，支持iOS和Android两个...
Flutter 基本布局
01-20
本篇博客大致介绍了通过 Flutter 实现一些简单的页面布局，官方的参考文档： https://flutter.cn/docs/get-started/flutter-for/web-devs 首先，项目的入口如下，后面的所有操作都是对 container 变量进行更改 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @
Flutter：页面布局摘要
a526001650a的专栏
10-17 1835
页面布局
Flutter常用布局方式
c_liufeng的博客
12-08 9411
文章目录flutter 布局介绍一、Container 布局1.属性2. 示例二、线性布局1.说明2. 属性3. 示例三、弹性布局 Flex1.属性2. Expanded 的使用3. 示例四、流式布局1.说明2. 属性3. 示例五、层叠布局1.说明2. 属性StackPositioned3. 示例 flutter 布局介绍 一、Container 布局 1.属性 属性 类型 说明 child Widget 声明子组件 alignment Alignment 控制child的对齐方式，
Flutter布局详解，必知必会
最新发布
2401_84122826的博客
04-17 947
布局类Widget就是指直接或间接继承(包含)MultiChildRenderObjectWidget的Widget，它们一般都会有一个children属性用于接收子Widget。在Flutter中Element树才是最终的绘制树，Element树是通过widget树来创建的（通过Widget.createElement()），widget其实就是Element的配置数据。它的最终布局、UI界面渲染都是通过RenderObject对象来实现的，这里的细节我就不详细描述了，因为我也不懂。
Flutter学习总结（九、Flutter的基本布局)
Flutter学习总结
04-16 594
Flutter的基本控件 一起从0开始学习Flutter! 我们之前说过Flutter中都是由组件构成的，组件分成两种，一种是可变状态的Widget继承自StatefulWidget，一种是不可变的Widget继承自StatelessWidget，有什么区别呢？在StatefulWidget中可以通过setState()方法来通知组件来调用自己的build()方法来刷新页面。在StatelessW...
Flutter (十二) 页面布局 综合案例 ( 一 )
没有翅膀的我们，只是随便认为不能飞而已
06-18 1088
用比较常见的布局案例，先入门，具体的组件属性就在后期的学习中加强。先把模子搭起来，再细琢。 案例一 导入图片 注意：配置图片路径写法注意，不要多空格，文件路径以及文件名要正确。 布局思路如下图 代码 用到的Widget :Container Column Row Expanded import 'package:flutter/material.dart'; void main() {...
Android 屏幕适配 ScreenAdapter
houyingshang的博客
05-14 1454
一行代码搞定安卓全屏幕适配——简单粗暴-低入侵，无继承，简单高效 话不多说，先上解决方案方案一(推荐) ##### 1.引用工具类      DensityHelper.javapackage packagename; import android.app.Activity; import android.app.Application; import android.content.Conte...
Flutter代码锦囊---切换时页面保持状态
咖啡花园
04-23 3433
一个正常的Flutter项目中，通过底部导航栏（BottomNavigationBar）或者标签栏（TabBar）组件来切换页面内容，是很正常的操作。但是大家是否有发现，每次导航栏或标签栏切换页面时，之前的页面就被清理了。比如，第一个页面的列表视图（ListView）已经滑动到底部，切换到第二个页面以后再回来，第一个页面的列表又回到了顶部。 出现上面问题的原因是，页面的状态（State）没有被保留...
FractionallySizedBox 按比例设置Widget的尺寸
卓原的进化之旅
08-22 1374
FractionallySizedBox 按比例设置Widget的尺寸 有时候,应用的设计是按比例给出的,例如这样 : 按钮应该占应用宽度的70% 这时可以使用FractionallySizedBox来实现. 构造方法 const FractionallySizedBox({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, }) 我们先看一下
Flutter实战教程：从入门到精通
《Flutter实战》是一本由高级技术专家杜文（网名wendux）编写的中文书籍，他不仅是Flutter中文网社区的创办者和多个知名开源项目的作者，如dio、fly和dsBridge。这本书是Flutter中文社区的开源项目，旨在为初学者和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值