您现在的位置是:首页 > 正文

【Flutter实战 --- 渐变 圆角矩形背景 圆球背景】

2024-01-30 22:32:06阅读 0

需求:

  1. 渐变圆球
  2. 圆角矩形

单行文本:在这里插入图片描述
多行文本:在这里插入图片描述

关键

  1. 圆球: decoration: BoxDecoration
  2. 圆角矩形:ClipRRect
    • borderRadius 控制圆角

代码

    return Column(
      children: <Widget>[
        Row(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 8),
              child: Container(
                height: 40,
                width: 40,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: LinearGradient(
                    colors: [Color(0xFF2EE6E6), Color(0xFF0099E6)],
                  ),
                ),
                child: Text(
                  '问题\n示例',
                  maxLines: 2,
                  style: TextStyle(fontSize: 10, color: SGColors.white),
                ),
              ),
            ),
            Flexible(
              child: ClipRRect(
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                      bottomLeft: Radius.circular(10)),
                  child: Container(
                      color: SGColors.grayBackground,
                      child: Padding(
                        padding: EdgeInsets.all(10),
                        child: StreamBuilder<String>(
                            stream: bloc.question,
                            builder: (BuildContext context,
                                AsyncSnapshot<String> snapshot) {
                              return Text(snapshot.data ?? '',
                                  maxLines: 10,
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold,
                                      color: SGColors.graySecond));
                            }),
                      ))),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 40, bottom: 12),
          child: Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 8),
                child: Container(
                  height: 40,
                  width: 40,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    gradient: LinearGradient(
                      colors: [Color(0xFFFFE14D), Color(0xFFFFC34D)],
                    ),
                  ),
                  child: Text(
                    '回答\n设置',
                    maxLines: 2,
                    style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.bold,
                        color: SGColors.grayPrimary),
                  ),
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    '请设置自动回复话术',
                    maxLines: 1,
                    style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                        color: SGColors.grayPrimary),
                  ),
                  Text(
                    '机器人将自动回复您选择或自定义的内容',
                    maxLines: 1,
                    style: TextStyle(fontSize: 10, color: SGColors.grayAssist),
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );


网站文章

  • kali系统中使用weevely创建木马(合并成图片木马)

    这里写目录标题weevely:kali中的军刀图片木马weevely:kali中的军刀创建木马:weevely generate <password> filename.php连接木马:weevely...

    2024-01-30 22:31:58
  • 计算机中机械硬盘的性能指标,硬盘的性能指标是什么

    计算机中机械硬盘的性能指标,硬盘的性能指标是什么

    硬盘的性能指标,包括硬盘容量、硬盘速度、硬盘转速、接口、缓存、硬盘单碟容量等。硬盘的性能指标,包括硬盘容量、硬盘速度、硬盘转速、接口、缓存、硬盘单碟容量等。硬盘的性能指标一、容量作为计算机系统的数据存...

    2024-01-30 22:31:51
  • Spring Cloud Alibaba 整合OpenFeign

    Spring Cloud Alibaba 整合OpenFeign

    在前面的文章我们写过一次Spring Cloud Alibaba 怎么做服务调用,当时说的Spring Cloud 内建两种实现方法,分别是 @LoadBalanced RestTemplate 以及...

    2024-01-30 22:31:23
  • maven html文件 404,simple spring web maven 项目无法发布到tomcat下(404异常)

    当前位置:我的异常网» Java Web开发»simple spring web maven 项目无法发布到tomcat下(4simple spring web maven 项目无法发布到tomcat下(404异常)www.myexceptions.net网友分享于:2015-10-21浏览:0次simple spring web maven 项目无法发布到tomcat下(404错误)...

    2024-01-30 22:31:15
  • html页面基于ajax按钮60秒倒计时

    基于ajax按钮动态刷新倒计时 var count = 60;//声明全局变量 $(function(){ var starttime = $.cookie(&quot;registertime&quot;);//取上次点击按钮发送验证码的时间 if(starttime){//判断是否在该浏览器点击过该按钮 var curtime = new Date().fo...

    2024-01-30 22:31:08
  • SpringBoot读取properties配置文件

    application.properties #map 第一种方式 data.person.name=zhangsan data.person.sex=man data.person.age=11 d...

    2024-01-30 22:30:39
  • 不同语言程序 zmq 通信遇到的问题

    工作中用到了golang写一个opc 客户端,从opc server获取数据,并格式化成内部通用格式,屏蔽外差异。用到了golang的zmq ,作为 publish server。以前客户端是用python写的,用的是subscribe模式。但是有一个问题,python 的zmq 的发送接收有很多方法,send(), send_json(), send_multipart(),而golang...

    2024-01-30 22:30:32
  • linux下java代码中执行R代码或函数(二)

    前言以下代码在redhat 6.4,jdk 1.7,R 3.1.2下运行通过。在linux下使用rJava比在windows下繁琐一些,如果初次调用,会遇到各种问题。作为一个经典的插件,请坚信这些问题都可以找到解决方案,你需要的就是耐心地google一个又一个关键字。未完待续。。。引用文章参考以下博客,感谢原作者的分享: [1] 终于搞定Java调用R了 [2] 安装rJava包失败处理方法

    2024-01-30 22:30:25
  • kudu-列式存储管理器-第三篇

    1、kudu-分区方式 为了提供可扩展性,Kudu 表被划分为称为 tablets 的单元,并分布在许多 tablet servers 上。行总是属于单个 tablet 。将行分配给 tablet 的方法由在表创建期间设置的表的分区决定。 kudu提供了3种分区方式: 1.1、Range Partitioning ( 范围分区 ) 1.1.1、Range Partitioning ( 范围...

    2024-01-30 22:29:55
  • sql语句使用in条件查询时结果为多个mybatis返回一个的问题分析

    sql语句使用in条件查询时结果为多个mybatis返回一个的问题分析

    sql语句使用in条件查询时结果为多个mybatis返回一个的问题分析

    2024-01-30 22:29:48