flutter常用组件总结
2023-09-14 08:59:07 时间
一、 继承StatelessWidget组件
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//TODO:implementbuild
return Center(
child: Text(
"My name is maple",
textDirection: TextDirection.ltr,
),
);
}
}
二、Text组件
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//TODO:implementbuild
return Center(
child: Text(
"My name is maple",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0, //字体大小
fontWeight: FontWeight.bold, //字体粗细
color: Colors.yellow //字体颜色
),
),
);
}
}
三、MaterialApp顶层组件
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final routes = {
'/': (BuildContext context) => new Home(),
};
@override
Widget build(BuildContext context) {
//TODO:implementbuild
return MaterialApp(
title: "标题",
//主题
theme:
ThemeData(primarySwatch: Colors.red, brightness: Brightness.light),
// 主页
// home: Home(),
// 路由
routes: routes);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(
"My name is maple",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 30.0, //字体大小
fontWeight: FontWeight.bold, //字体粗细
color: Colors.yellow //字体颜色
),
),
);
}
}
四、Text,Container 组件
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { //TODO:implementbuild return MaterialApp( title: "标题", //主题 theme: ThemeData(primarySwatch: Colors.red, brightness: Brightness.light), // 主页 home: Scaffold( appBar: AppBar( title: Text('Flutter'), elevation: 30.0, ), body: Home()), //设置标题阴影 不需要的话值设置成 0.0 ); } } class Home extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( // Container类似于css的div child: Container( child: Text( "My name is maple and I like to eat", textAlign: TextAlign.center, //文本对齐方式 overflow: TextOverflow.ellipsis, //文字超出屏幕之后的处理方式(clip 裁剪,fade 渐隐,ellipsis 省略号) textScaleFactor: 1.5, //字体显示倍率 textDirection: TextDirection.ltr, //文本方向(ltr 从左至右,rtl 从右至 左) maxLines: 2, //文字显示最大行数 style: TextStyle( fontSize: 25.0, //字体大小 fontWeight: FontWeight.bold, //字体粗细 color: Colors.red, //字体颜色 fontStyle: FontStyle.italic, //文字样式(italic 斜体,normal 正常体) ), ), //topCenter:顶部居中对齐 // topLeft:顶部左对齐 // topRight:顶部右对齐 // center:水平垂直居中对齐 // centerLeft:垂直居中水平居左对齐 // centerRight:垂直居中水平居右对齐 // bottomCenter 底部居中对齐 // bottomLeft:底部居左对齐 // bottomRight:底部居右对齐 alignment: Alignment.topLeft, height: 300.0, width: 300.0, // 类似于css的盒模型 decoration: BoxDecoration( color: Colors.yellow, border: Border.all(color: Colors.blue, width: 2.0), //边框 borderRadius: BorderRadius.all( // Radius.circular(150), //圆形 Radius.circular(10), //圆角 ), ), // padding 就是 Container 的内边距,指 Container 边缘与 Child 之间的距离 // padding:EdgeInsets.all(20), padding: EdgeInsets.fromLTRB(10, 30, 5, 0), // margin 属性是表示 Container 与外部其他 组件的距离 margin: EdgeInsets.fromLTRB(10, 30, 5, 0), // 让 Container 容易进行一些旋转之类的 // transform: Matrix4.translationValues(100, 0, 0) transform: Matrix4.rotationZ(0.3) // transform: Matrix4.diagonal3Values(1.2, 1, 1) ), ); } }
五、Image组件
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( // 加载本地文件 child: Image.asset( 'images/p2620309098.jpg', // fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来 的。 // BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。 // BoxFit.contain:全图显示,显示原比例,可能会有空隙。 // BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要 充满整个容器,还不变形)。 fit: BoxFit.cover, // 设置图片的背景颜色,通常和 colorBlendMode 配合一起 使用, // 这样可以是图片颜色和背景色混合。 // 上面的图片就 是进行了颜色的混合,绿色背景和图片红色的混合 color: Colors.red, colorBlendMode: BlendMode.colorDodge, ), height: 400, width: 400, decoration: BoxDecoration(color: Colors.yellow), )); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( //如果 child 为正方形时剪裁之后是圆形,如果 child 为矩形时,剪裁之后为椭圆形。 child: ClipOval( child: Container( // 加载网络文件 child: Image.network( 'https://img1.doubanio.com/view/photo/l/public/p2578828978.webp', // fit 属性用来控制图片的拉伸和挤压,这都是根据父容器来 的。 // BoxFit.fill:全图显示,图片会被拉伸,并充满父容器。 // BoxFit.contain:全图显示,显示原比例,可能会有空隙。 // BoxFit.cover:显示可能拉伸,可能裁切,充满(图片要 充满整个容器,还不变形)。 fit: BoxFit.cover, // 设置图片的背景颜色,通常和 colorBlendMode 配合一起 使用, // 这样可以是图片颜色和背景色混合。 // 上面的图片就 是进行了颜色的混合,绿色背景和图片红色的混合 color: Colors.red, colorBlendMode: BlendMode.colorDodge, ), height: 400, width: 400, decoration: BoxDecoration(color: Colors.yellow), ), ), ); } }
六、ListView列表组件
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return ListView( padding: EdgeInsets.all(10), children: <Widget>[ Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img1.doubanio.com/view/photo/m/public/p2620309098.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img1.doubanio.com/view/photo/m/public/p2578828978.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img1.doubanio.com/view/photo/m/public/p2621748239.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img9.doubanio.com/view/photo/m/public/p2627557925.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img9.doubanio.com/view/photo/m/public/p2624006816.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Container( child: Text( '曼达洛人二', textAlign: TextAlign.center, style: TextStyle( fontSize: 28, ), ), height: 60, padding: EdgeInsets.fromLTRB(0, 10, 0, 10), ), Image.network( "https://img2.doubanio.com/view/photo/m/public/p2627320552.webp"), ], ); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( height: 180, padding: EdgeInsets.fromLTRB(5, 0, 5, 0), child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( width: 250.0, color: Colors.red, child: ListView( children: <Widget>[ Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Text('曼达洛人') ], ), ), Container( width: 250.0, color: Colors.orange, child: ListView( children: <Widget>[ Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Text('曼达洛人') ], ), ), Container( width: 250.0, color: Colors.blue, child: ListView( children: <Widget>[ Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Text('曼达洛人') ], ), ), Container( width: 250.0, color: Colors.deepOrange, child: ListView( children: <Widget>[ Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Text('曼达洛人') ], ), ), Container( width: 250.0, color: Colors.deepPurpleAccent, child: ListView( children: <Widget>[ Image.network( "https://img3.doubanio.com/view/photo/m/public/p2623776231.webp"), Text('曼达洛人') ], ), ), ], ), ); } }
七、动态ListView组件
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { List httpList = [ 'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp', 'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp', 'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp', 'https://img2.doubanio.com/view/photo/m/public/p2622724983.webp' ]; //自定义方法 List<Widget> _getData() { List<Widget> list = new List(); httpList.forEach((http) { list.add(Container( height: 300, child: Image.network("$http"), )); }); return list; } @override Widget build(BuildContext context) { // TODO: implement build return ListView( children: this._getData(), ); } }
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { List listData = [ { "title": '曼达洛人第1集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第2集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第3集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第4集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第5集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第6集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, ]; //自定义方法 List<Widget> _getListData() { var tempList = listData.map((value) { return Container( // 分割线 decoration: BoxDecoration( color: Colors.white, border: Border(bottom: BorderSide(width: 1, color: Colors.black12))), child: ListTile( leading: CircleAvatar(backgroundImage: NetworkImage(value["imageUrl"])), title: Text(value["title"]), subtitle: Text(value["type"])), ); }); return tempList.toList(); } @override Widget build(BuildContext context) { // TODO: implement build return ListView( children: this._getListData(), ); } }
八、GridView组件(网格视图)
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter')), body: HomeContent(), )); } } class HomeContent extends StatelessWidget { List listData = [ { "title": '曼达洛人第1集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第2集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第3集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第4集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第5集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, { "title": '曼达洛人第6集', "type": '科幻', "imageUrl": 'https://img1.doubanio.com/view/photo/m/public/p2578828978.webp', }, ]; 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: 18), ) ], ), decoration: BoxDecoration( borderRadius: const BorderRadius.all(const Radius.circular(8.0)), //外圆角 border: Border.all( color: Color.fromRGBO(111, 111, 111, 0.9), width: 2)), // height: 400, //设置高度没有反应 ); }); return tempList.toList(); } @override Widget build(BuildContext context) { return GridView.count( //水平子 Widget 之间间距 crossAxisSpacing: 10.0, //垂直子 Widget 之间间距 mainAxisSpacing: 10.0, //一行的 Widget 数量 padding: EdgeInsets.symmetric(horizontal:16), crossAxisCount: 2, //宽度和高度的比例 childAspectRatio: 0.63, children: this._getListData(), ); } }
相关文章
- flutter系列之:用来管理复杂状态的State详解
- flutter 屏幕适配
- flutter中的多线程
- Flutter 组件集录 | FlexibleSpaceBar 组件是怎么炼成的
- Flutter 构建一个 todo list 应用
- flutter系列之:永远不用担心组件溢出的Wrap
- 第127期:Flutter的Text组件
- flutter系列之:flutter中listview的高级用法
- 第130期:flutter的状态组件和状态管理
- Flutter 知识集锦 | 基于 Flow 实现滑动显隐层
- Flutter 3.7更新详解
- 【错误记录】Flutter 设备连接显示 Loading... ( 断网 | 删除 flutter/bin/cache/lockfile 文件 )
- 【错误记录】命令行创建 Flutter 应用报错 pub get failed (server unavailable) -- attempting retry 1 in 1 second...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
- 【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
- 【Flutter】Flutter 应用生命周期 ( 前台状态 resumed | 后台状态 paused | 非活动状态 inactive | 组件分离状态 detached )
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 【Flutter】Image 组件 ( Image 组件简介 | Image 构造函数 | Image.network 构造函数 | Image.asset 构造函数 )
- 【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
- 【Flutter】Image 组件 ( 内存加载 Placeholder | transparent_image 透明图像插件 )
- 【Flutter】监听滚动动作 控制组件 透明度渐变 ( 移除顶部状态栏空白 | 帧布局组件 | 透明度组件 | 监听滚动组件 )
- 【Flutter】Future 异步编程 ( 简介 | then 方法 | 异常捕获 | async、await 关键字 | whenComplete 方法 | timeout 方法 )
- 【Flutter】ListView 列表高级功能 ( RefreshIndicator 下拉刷新组件 )