使用chatGPT生成一个带圆角的Container

我在项目中是想实现如图带圆角的Container，使用chatGPT生成步骤如下。

首先，生成渐变色的Container

生成的Container代码如下：

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 200.0,width: double.infinity,decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),),
)

此时，并没有圆角，所以再告诉AI“再给他左上，右下，左下5个像素的圆角，右上80像素。”

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 200.0,width: double.infinity,decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(5.0),bottomLeft: Radius.circular(5.0),bottomRight: Radius.circular(5.0),topRight: Radius.circular(80.0),),gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),),
)

此时我因为做了一些其他的事情，所以我重新打开一个一个窗口，并问

我需要对它的内容增加文字，从左至右，从上至下，写上标题：当前佣金，正文：字号比较大的数字，然后右边有一个提现的按钮。

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 180,decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(5.0),bottomLeft: Radius.circular(5.0),bottomRight: Radius.circular(5.0),topRight: Radius.circular(80.0),),gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),),child: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Padding(padding: const EdgeInsets.only(left: 20),child: Text('当前佣金',style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold,color: Colors.white,),),),Padding(padding: const EdgeInsets.only(left: 20, top: 10),child: Text('¥ 200.00',style: TextStyle(fontSize: 40,fontWeight: FontWeight.bold,color: Colors.white,),),),],),alignment: Alignment.centerLeft,
),
可以将这个代码放在最外层的 widget 中，并且将提现按钮放置在 Container 外面。

因为它说将按钮放置在Container外面，所以并没有写按钮。

不，提现的按钮需要放在Container里面，你可以将它改为一个提现的图标，但是必须在Container里面。

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 180,decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(5.0),bottomLeft: Radius.circular(5.0),bottomRight: Radius.circular(5.0),topRight: Radius.circular(80.0),),gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),),child: Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.center,children: [Padding(padding: const EdgeInsets.fromLTRB(20, 0, 0, 10),child: Text("当前佣金",style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.w800,color: Colors.white,),),),Text("123456789.00",style: TextStyle(fontSize: 40.0,fontWeight: FontWeight.w800,color: Colors.white,),),Spacer(),IconButton(icon: Icon(Icons.input, color: Colors.white),onPressed: () {// Your code here},),],),
),

此时样式已经乱了，终于明白为什么它要说建议将按钮放在外面，但是原因我还没有去查找，我就将按钮改成了图标，并继续询问：将按钮改成可以点击的图标。

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 180,decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(5.0),bottomLeft: Radius.circular(5.0),bottomRight: Radius.circular(5.0),topRight: Radius.circular(80.0),),gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Padding(padding: const EdgeInsets.fromLTRB(20, 30, 0, 10),child: Text("当前佣金",style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.w500,color: Colors.white,),),),Padding(padding: const EdgeInsets.fromLTRB(20, 10, 0, 10),child: Text("100.0",style: TextStyle(fontSize: 40.0,fontWeight: FontWeight.w800,color: Colors.white,),),),],),GestureDetector(onTap: () {// Perform the withdrawal action},child: Padding(padding: const EdgeInsets.fromLTRB(0, 60, 20, 0),child: Icon(Icons.arrow_forward_ios,color: Colors.white,size: 48,),),),],),
);

最后的图标为需要再自己修改一下，加个阴影，看看是不是还挺像的。

对了，忘记给Container加上阴影，所以最后再来一下：

Container(margin: EdgeInsets.fromLTRB(30, 0, 30, 0),height: 180,decoration: BoxDecoration(borderRadius: BorderRadius.only(topLeft: Radius.circular(5.0),bottomLeft: Radius.circular(5.0),bottomRight: Radius.circular(5.0),topRight: Radius.circular(80.0),),gradient: LinearGradient(begin: Alignment.topLeft,end: Alignment.bottomRight,colors: [Color(0xFF3238C5),Color(0xFF6953E9),],),boxShadow: [BoxShadow(color: Colors.black26,offset: Offset(0, 7),blurRadius: 6.0,),],),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Padding(padding: const EdgeInsets.fromLTRB(20, 30, 0, 10),child: Text("当前佣金",style: TextStyle(fontSize: 20.0,fontWeight: FontWeight.w500,color: Colors.white,),),),Padding(padding: const EdgeInsets.fromLTRB(20, 10, 0, 10),child: Text("100.0",style: TextStyle(fontSize: 40.0,fontWeight: FontWeight.w800,color: Colors.white,),),),],),GestureDetector(onTap: () {// Perform the withdrawal action},child: Padding(padding: const EdgeInsets.fromLTRB(0, 60, 20, 0),child: Icon(Icons.arrow_forward_ios,color: Colors.white,size: 48,),),),],),);

最后对比一下，是不是还蛮像的？

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/25166.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ChatGPT-4 如何改变 AI 市场及其对未来的影响？GPT版本及其差异

ChatGPT-4 如何改变 AI 市场及其对未来的影响？GPT版本及其差异

GPT-1 对比 GPT-2 对比 GPT-3。Chat GPT (Generative Pre-trained Transformer) 是一种高级自然语言处理模型，它使用机器学习算法来生成看起来像人类所写的文本。GPT模型的发展彻底改变了人工智能领域，特别是在语言处理领域。 多年来，已经发布了多个版本的 GPT 模型，每个版…
阅读更多...
AI新风向标PaLm2？能否取代ChatGPT成为AI领域的老大

AI新风向标PaLm2？能否取代ChatGPT成为AI领域的老大

AI新风向标PaLm2&#xff1f; ​ 前几天Google发布了&#xff0c;PaLM2作为Google的下一代大型语言模型&#xff0c;它会取代ChatGPT成为更智能的AI工具吗? 关于PaLM2 ​ PaLM 2是Google的下一代大型语言模型&#xff0c;它建立在谷歌在机器学习和负责任的人工智能方面的突破…
阅读更多...
部落冲突外挂

部落冲突外挂

有人玩部落冲突吗&#xff0c;我这里有挂&#xff0c;加我qq3083413274&#xff0c;我给你。
阅读更多...
最新最全文献下载网站：文献部落——一站式查找、下载文献！

最新最全文献下载网站：文献部落——一站式查找、下载文献！

来喽来喽&#xff01; 小编带着新鲜出炉的“文献部落”来喽&#xff01;同样是文献下载&#xff0c;凭啥只有他值得我推荐&#xff1f;还不是因为好用&#xff1f;&#xff01;你以为只有SCI吗&#xff1f;太天真了&#xff01;你往下看↓↓↓ 文献部落&#xff1a;http://459…
阅读更多...
外文文献检索网站

外文文献检索网站

1. Google scholar 网址&#xff1a; https://scholar.google.com.hk/?hlzh-CN 如今搜索论文的首选&#xff0c;可以在这里查看论文统计和引用参考文献&#xff0c;还能通过关注作者或者论文获得新论文更新提醒&#xff0c;以及利用自动化推荐来提供一个基本库 2. DBLP 网址…
阅读更多...
COC部落冲突自动找鱼 python脚本

COC部落冲突自动找鱼 python脚本

众所周知&#xff0c;最近COC被腾讯收购了&#xff0c;又整了一波活&#xff0c;花里胡哨的兵种都不认识了&#xff0c;这件事我不做评价吧。 图个新鲜感&#xff0c;高中几个哥们突然又玩起了部落冲突&#xff0c;打&#x1f41f;一时爽&#xff0c;一直打&#x1f41f;一直爽…
阅读更多...
代码故事：汉德的救赎

代码故事：汉德的救赎

我叫汉德（Handle），是一段程序代码，出生在日食之城埃地特（Editor）。 我诞生于伟大而荣耀的瑟维斯家族（Service），我们家族的格言是：“瑟维斯永不倒下。（Services never crash down.）”。 信仰 我们家族的信仰，哦，不对，应该是所有代码家族的信仰都是普瑞格兰姆神…
阅读更多...
coc部落冲突脚本辅助工具，小曦coc，PHP随机数生成代码

coc部落冲突脚本辅助工具，小曦coc，PHP随机数生成代码

什么是脚本&#xff1f; &#xff08;1&#xff09;脚本就是剧本 &#xff08;2&#xff09;脚本是普通的文本文件&#xff0c;是批处理文件 &#xff08;3&#xff09;脚本导演了一个序列事件的发生 &#xff08;4&#xff09;脚本让一个例行任务效率大幅提升 游戏脚本基本只…
阅读更多...
英文文献调研方法综述

英文文献调研方法综述

文章目录 1. 进行英文文献调研的理由2. 文献调研的纲要2.1. 文献调研的目的2.2. 文献调研的原则2.3. 文献调研的步骤 3. 常用的搜索平台及数据库3.1. 文献搜索平台3.1.1. Text Analyzer3.1.2. Web of Science3.1.3. Google Scholar3.1.4. CORE & DOAJ3.1.5. ProQuest 3.2. …
阅读更多...
不用校园网如何下载论文文献｜DOI号｜文献免费下载

不用校园网如何下载论文文献｜DOI号｜文献免费下载

不用校园网如何下载论文文献&#xff5c;DOI号&#xff5c;文献免费下载 研究生人员在学校里避免不了要下载文献&#xff0c;有些文章&#xff0c;如果学校没有购买数据库&#xff0c;还要付费下载&#xff0c;挺鸡肋的&#xff0c;这里&#xff0c;我整理了一些自己收藏的网站…
阅读更多...
jquery 中加入html代码,jquery实现动态添加html代码

jquery 中加入html代码,jquery实现动态添加html代码

先看下思导图，整体了解下，然后我们再来学习。 现在我们来看一下几段代码，然后根据这几段代码我们来学习一下如何正确的学习动态添加html。 一.html()方法 html函数的作用原理首先是移除目标元素内部的html代码，然后将新代码添加到目标元素。 第一段代码：function CommentB…
阅读更多...
巨推荐！文献下载利器！6个网站可随时随地免费下载中文文献！

巨推荐！文献下载利器！6个网站可随时随地免费下载中文文献！

一、文献小镇 网址：http://www.sci-hub.ac.cn/ 文献小镇号称是中国版的SCI-HUB，界面同SCI-HUB一样简洁明了，可以采用URL,PMID/DOI等方式搜索下载文献。 下载英文文献，进入文献小镇首页，只需要在搜索框输入文章doi即可直接进入sci-hub的下载页面。当然，下方的学术网站也提…
阅读更多...
chatgpt赋能python：Python如何下载电影？

chatgpt赋能python：Python如何下载电影？

Python如何下载电影&#xff1f; Python作为一种高级编程语言&#xff0c;通过其丰富的库和模块&#xff0c;可以轻松地完成各种任务&#xff0c;包括下载电影。以下是你需要知道的关键步骤。 了解电影下载网站 首先&#xff0c;你需要知道哪些网站提供电影下载。常见的电影…
阅读更多...
chatgpt赋能Python-python_figsize默认大小

chatgpt赋能Python-python_figsize默认大小

Python figsize默认大小&#xff1a;您需要知道的一切 Python作为一种流行的编程语言&#xff0c;被许多程序员用于数据科学、机器学习、Web开发等领域。在绘制图表时&#xff0c;matplotlib是Python最流行的绘图库之一。在使用matplotlib绘图时&#xff0c;默认情况下&#x…
阅读更多...
chatgpt赋能python：Python画图坐标轴教程

chatgpt赋能python：Python画图坐标轴教程

Python画图坐标轴教程 Python是一种非常受欢迎的编程语言&#xff0c;可用于数据分析、机器学习、Web开发等领域。它也是一个强大的绘图工具。Python可以使用许多绘图库&#xff0c;如Matplotlib、Seaborn、Plotly等&#xff0c;来可视化数据和生成图形。 在这篇文章中&#x…
阅读更多...
7 11 藏尾诗c语言,为你写诗：11种杂体诗，汉语太神奇

7 11 藏尾诗c语言,为你写诗：11种杂体诗，汉语太神奇

原标题&#xff1a;为你写诗&#xff1a;11种杂体诗&#xff0c;汉语太神奇 胸藏文墨怀如谷&#xff0c;腹有诗书气自华 杂体诗通指古典诗歌格律体以外的各种各样的诗体。 这些诗多把字形、句法、声律和押韵加以特殊变化&#xff0c;成为独出心裁的奇异之作&#xff0c;一般带有…
阅读更多...
这20首诗词献给天下程序员们

这20首诗词献给天下程序员们

转载自&#xff1a;程序员最幽默&#xff08;ID&#xff1a;humor1024&#xff09; 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 精彩回顾 ♡ 程序员究竟能干多少年&#xff1f; ♡ 互联网公司各岗位真实工作内容起底 ♡ 一次尴尬的采访和程序员的传奇脑洞&a…
阅读更多...
Python做一个藏头诗生成器

Python做一个藏头诗生成器

前几天给大家介绍了有意思的藏头诗&#xff0c;今天我们就用Python来自己根据输入语句实现自动生成藏头藏尾诗吧。 整个诗句生成的逻辑是这样的&#xff0c;先根据输入语句爬取符合要求的诗句&#xff08;来自百度汉语&#xff09;&#xff0c;再根据更多样化的需求定制“新诗”…
阅读更多...
爬取B站多P视频

爬取B站多P视频

import requests from parsel import Selector import json, os, timeclass GetBv():def __init__(self, bvid, page1):bvid:视频号 eg:BV1hE411N7q2&#xff0c;strpage: P几的视频&#xff0c;默认为1 intself.bvid bvidself.page pageself.pg_dic, self.file_name, self.a…
阅读更多...
【python+pyqt5】B站直播弹幕姬

【python+pyqt5】B站直播弹幕姬

文章目录 前言1.日志对象2.获取弹幕3.qt窗口窗口间传递信号主窗口设置窗口弹幕展示窗口托盘 4.主函数5.最终成果及使用方法6.开源地址 前言 这个软件是基于我半年多前写的一个小小小软件&#xff08;https://www.bilibili.com/video/BV1zN411Q7u4&#xff09;的一个大更新&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023