Flutter 登录与list列表demo
2024-10-12 09:42:49
import 'package:flutter/material.dart';
void main() => runApp(DemoApp());
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SingleChildScrollView Demo',
home: new Scaffold(
appBar: AppBar(
// 去掉导航栏下面的阴影
elevation: 0.0,
title: Text('SingleChildScrollView Demo'),
),
body: SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Center(
child: Column(
children: <Widget>[
Container(
color: Colors.blue,
child: BigImgs(),
),
Container(
height: 200.0,
child: HomePage(),
),
SizedBox(height: 10), //保留高度间距10,在垂直下Column
Container(
// width: 320.0,
height: 140.0,
// color: Colors.pink,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BigImgsRadius(),
TextIntroduce(),
SizedBox(width: 10), //保留宽度间距20,在水平下Row
TextIntroduceSpan(),
],
),
),
SizedBox(width: 10),
Container(
width: 320.0,
// height: 200.0,
color: Colors.blue,
child: _buildCard(),
),
SizedBox(height: 10),
Container(
width: 320.0,
height: 110.0,
// color: Colors.yellow,
child: Column(
children: [
_buildStack(),
SizedBox(height: 10),
TextIntroduce(),
],
),
),
Container(
width: 320.0,
height: 200.0,
color: Colors.pink,
child: Horizontal(),
),
Container(
width: 320.0,
height: 200.0,
color: Colors.blue,
),
],
),
),
),
),
);
}
}
// StatelessWidget 无状态控件，没有自己的私有数据，纯展示控件
class BigImgs extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// child: _buildStack(),
// width: 100,
height: 160,
decoration: BoxDecoration(
color: Colors.amberAccent,
// borderRadius: BorderRadius.circular(300),
image: DecorationImage(
image: NetworkImage(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
fit: BoxFit.cover)),
);
}
}
// StatefulWidget 有状态控件，有自己私有数据
class HomePage extends StatefulWidget {
HomePage({Key key}) : super(key: key);
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Container(
child: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
// 跳转的路径
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return BigImgs();
}));
},
),
Divider(), //设置分割线
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
Divider(), //设置分割线
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
);
}
}
// 文字超出显示...
class TextIntroduce extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// child: _buildCard(),
child: Text(
"Lorem ipsum",
maxLines: 1, //
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
// child: Text(
// 'Lorem ipsum，hello world！Lorem ipsum，hello world！Lorem ipsum，hello world',
// style: TextStyle(
// color: Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5),
// backgroundColor: Colors.red,
// fontSize: 30.0,
// letterSpacing: 6.0,
// fontStyle: FontStyle.italic,
// wordSpacing: 15.0,
// height: 2.0, //'height: 用在Text控件上的时候，会乘以fontSize做为行高,所以这个值不能设置过大',
// background: Paint()..color = Colors.blue,
// textBaseline: TextBaseline.alphabetic,
// fontFamily: "Georgia",
// shadows: [
// Shadow(color: Colors.black, offset: Offset(5, 6), blurRadius: 3)
// ],
// decoration: TextDecoration
// .underline, //underline：下划线,none：无划线,overline：上划线,lineThrough：中划线,combine：这个就厉害了，可以传入一个List，三线齐划
// // decoration: TextDecoration.combine(
// // [TextDecoration.underline, TextDecoration.overline]),
// decorationColor: Colors.black,
// decorationStyle: TextDecorationStyle.wavy, //默认实线,dashed是虚线
// decorationThickness: 3.0,
// debugLabel: 'text'),
// textAlign: TextAlign.justify,
// textDirection: TextDirection.rtl,
// locale: Locale('fr', 'CH'),
// softWrap: true, //文本超出容器时是否自动换行，默认为true，为false时文本超出容器部分默认被剪切
// maxLines: 2, //文本的最大行数,
// overflow: TextOverflow.visible,
// textScaleFactor: 1.5,
// semanticsLabel:
// 'test', //图像的语义描述，用于向Andoid上的TalkBack和iOS上的VoiceOver提供图像描述
// ),
width: 100,
// color: Colors.grey[300], //backgroundColor
);
}
}
// 文字改变颜色
class TextIntroduceSpan extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Text.rich(TextSpan(children: [
TextSpan(text: 'hello: '),
TextSpan(text: 'world', style: TextStyle(color: Colors.red))
])),
);
}
}
class BigImgsRadius extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
// child: _buildStack(),
width: 100,
height: 100,
decoration: BoxDecoration(
color: Colors.amberAccent,
borderRadius: BorderRadius.circular(300),
image: DecorationImage(
image: NetworkImage(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F06%2F20180806140035_nnbed.thumb.700_0.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616430520&t=b40681968ba087b3533e17b9aa036450"),
fit: BoxFit.cover)),
);
}
}
class Horizontal extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: ListView(
// This next line does the trick.
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
color: Colors.red,
child: BigImgs(),
),
Container(
color: Colors.green,
child: _buildStack(),
),
Container(
color: Colors.yellow,
child: BigImgs(),
),
Container(
color: Colors.orange,
child: _buildStack(),
),
Container(
color: Colors.yellow,
child: BigImgs(),
),
Container(
color: Colors.orange,
child: _buildStack(),
),
],
),
);
}
}
// Card卡片
Widget _buildCard() => SizedBox(
height: 210,
child: Card(
child: Column(
children: [
ListTile(
title: Text('1625 Main Street',
style: TextStyle(fontWeight: FontWeight.w500)),
subtitle: Text('My City, CA 99984'),
leading: Icon(
Icons.restaurant_menu,
color: Colors.blue[500],
),
),
Divider(),
ListTile(
title: Text('(408) 555-1212',
style: TextStyle(fontWeight: FontWeight.w500)),
leading: Icon(
Icons.contact_phone,
color: Colors.blue[500],
),
),
ListTile(
title: Text('costa@example.com'),
leading: Icon(
Icons.contact_mail,
color: Colors.blue[500],
),
),
],
),
),
);
//个人图像
Widget _buildStack() => Stack(
alignment: const Alignment(0.6, 0.6),
children: [
// CircleAvatar(
// backgroundImage: AssetImage('https://picsum.photos/250?image=9'),
// radius: 100,
// ),
CircleAvatar(
child: Image.network('https://picsum.photos/250?image=9'),
backgroundColor: Color(0xffff0000),
radius: 32.0,
foregroundColor: Color(0x55000000),
),
Container(
decoration: BoxDecoration(
color: Colors.black45,
),
child: Text(
'Mia B',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
);
最新文章
- android Sqlite小记
- Nancy Scripts,CSS文件夹配置
- motto2
- c#复制包含子目录文件夹代码
- linux 程序管理
- C#的Process类的一些用法
- xss漏洞校验
- AngularJs练习Demo1
- 通过cl_dd_document来实现在ALV中输出标题头
- onsite
- 浅谈ES6
- 【原】Java学习笔记031 - 常用类
- 小白的python之路10/29 文件归档
- expect脚本实例
- nginx/ajax跨子域请求的两种现代方法以及403解决
- 在verilog中调用VHDL模块
- LCS 最长公共子序列
- [LeetCode]83. Remove Duplicates from Sorted List(排序链表去重)
- 洛谷P2792 [JSOI2008]小店购物(最小树形图)
- python 图像识别
热门文章
- [数据结构]Dijkstra算法求单源最短路径
- MySQL 日期函数、时间函数在实际场景中的应用
- Echarts自适应屏幕，无需刷新网页，可根据屏幕大小完美展现，内有详细代码注释，我可真是个小机灵~~O(∩_∩)O哈哈~
- web应用开发模式、API接口、接口测试工具postman
- P6327 区间加区间sin和 题解
- 反射_Class对象功能_获取Constructor-反射_Class对象功能_获取Method
- 反射_Class对象功能概述-反射_Class对象功能_获取Field
- ES6块级作用域let声明和const声明以及与var之间的区别
- 新开一个系列，c++刷题集
- 四数相加II & 赎金信 & 三数之和 & 四数之和