Flutter 是 Google 推出并开源的移动应用开发框架，主打跨平台、高保真、高性能。开发者可以通过 Dart 语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter 提供了丰富的组件、接口，开发者可以很快地为 Flutter 添加 Native 扩展
场景的item布局一：
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tykt/generated/assets.dart';
class Part001DemoPage extends StatefulWidget {
const Part001DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part001DemoState();
}
}
class Part001DemoState extends State {
@override
Widget build(BuildContext context) {
double width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: const Text("场景一 常用的item布局"),
),
/// UnconstrainedBox 不受最外层布局的约束，
/// Container 容器自己单独设置大小
body: UnconstrainedBox(
child: Container(
margin: const EdgeInsets.all(20),
padding: const EdgeInsets.all(10),
width: width - 40,
color: Colors.black12,
/// row 横向 column 纵向布局
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
/// 第一行标题文案 ，最大2行，超过2行 省略处理
const Text(
"标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案标题文案",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
/// 中间显示固定大小的图片
Container(
margin: const EdgeInsets.only(top: 10, bottom: 5),
child: Image.asset(
Assets.assetsBg,
width: 200,
height: 100,
fit: BoxFit.cover,
),
),
/// Row 实现头像和昵称的效果
Row(
children: [
ClipOval(
child: Image.asset(
Assets.assetsBg,
width: 20,
height: 20,
fit: BoxFit.cover,
),
),
const Text("作者")
],
),
/// 发布时间
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(
"发布时间：${DateTime.now()}",
style: const TextStyle(color: Colors.black26, fontSize: 10),
),
)
],
),
),
),
);
}
}
二、常见的item布局二
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import '../../generated/assets.dart';
class Part002DemoPage extends StatefulWidget {
const Part002DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part002DemoSate();
}
}
class Part002DemoSate extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
title: Text("场景二 常用的item布局"),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
/// 整体上下结构 用 Column
child: Column(
children: [
/// 上半部分是横向结构用row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(bottom: 5, right: 5),
child: Image.asset(
Assets.assetsBg,
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
Expanded(
/// 上半部分的右边是上下结构的2个文案
child: Column(
children: const [
Text(
"测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案测试文案",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
"内容内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案内容文案文案",
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 12)),
),
],
))
],
),
/// 下半部分是一段文案
const Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
"文案文案文案文案文文案文案文案文文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案案文文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案",
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
)
],
),
);
}),
);
}
}
三、场景布局三
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import '../../generated/assets.dart';
class Part003DemoPage extends StatefulWidget {
const Part003DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part003DemoSate();
}
}
class Part003DemoSate extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
title: Text("场景三 常用的item布局"),
),
body: ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: const BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
child: Column(
children: [
/// 图片横向铺满
Container(
width: double.infinity,
/// 强制在宽度上铺满
margin: const EdgeInsets.only(bottom: 5, right: 5),
child: Image.asset(
Assets.assetsBg,
height: 150,
fit: BoxFit.cover,
),
),
/// 文案
const Padding(
padding: EdgeInsets.only(top: 10, bottom: 5),
child: Text(
"文案文案文案文案文文案文案文案文文案文案文案文文案文案文案文案文案文案文案文案文案文案文案文案案文文案文案文案文案文案文案文案文案文案文案文案文案案文案文案文案文案",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
/// Spacer() d簧控件 把 文案一和 99.992个控件分别撑开。
Padding(
padding: EdgeInsets.only(bottom: 5),
child: Row(
children: [
Text("文案一"),
Spacer(),
Text("¥99.99"),
],
),
),
/// 三个控件均分 MainAxisAlignment.spaceBetween
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Colors.blue),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"标签一",
style: TextStyle(fontSize: 12, color: Colors.white),
),
),
),
DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Colors.blue),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"标签二",
style: TextStyle(fontSize: 12, color: Colors.white),
),
),
),
DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.all(Radius.circular(5)),
color: Colors.blue),
child: Padding(
padding: EdgeInsets.all(5),
child: Text(
"标签三",
style: TextStyle(fontSize: 12, color: Colors.white),
),
),
),
],
)
],
),
);
}),
);
}
}
四、控件的背景效果。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import '../../generated/assets.dart';
class Part004DemoPage extends StatefulWidget {
const Part004DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part004DemoSate();
}
}
class Part004DemoSate extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
title: const Text("场景四 控件的背景效果"),
),
body: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30),
height: 300,
width: 200,
child: DecoratedBox(
child: const Padding(
padding: EdgeInsets.only(top: 2, bottom: 2, left: 5, right: 5),
child: Text(
"居中内容",
),
),
/// 设置边框
decoration: BoxDecoration(
border: Border.all(width:2, color: Colors.brown),
borderRadius: BorderRadius.all(const Radius.circular(5)),
),
),
decoration: const ShapeDecoration(
///color: Colors.white,
///设置渐变色
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.white,Colors.blue]),
/// 设置背景颜色
shape: RoundedRectangleBorder(
/// 设置背景角度
borderRadius: BorderRadius.all(Radius.circular(10)))),
),
);
}
}
五、控件的点击事件
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_tykt/utils/toast.dart';
import '../../generated/assets.dart';
import 'net_work_utils.dart';
class Part005DemoPage extends StatefulWidget {
const Part005DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part005DemoSate();
}
}
class Part005DemoSate extends State {
void requestNetData(int pageNo) {
ToastUtils.show("pageNo=$pageNo");
}
void requestNetData2() {
ToastUtils.show("requestNetData2");
}
void requestNetData3(int data) {
ToastUtils.show("requestNetData$data");
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white70,
appBar: AppBar(
title: const Text("场景五 控件的点击事件"),
),
body: Container(
alignment: Alignment.center,
margin: EdgeInsets.all(30),
height: 300,
width: 200,
child: Column(
children: [
/// ElevatedButton 封装好的点击按钮 onPressed
ElevatedButton(
onPressed: () {
ToastUtils.show("点击事件1");
requestNetData(5);
},
style: ButtonStyle(elevation: MaterialStateProperty.all(5)),
child: const Text(
"点击按钮1",
),
),
/// TextButton 封装好的点击按钮 onPressed
TextButton(
onPressed: () {
//ToastUtils.show("点击事件2");
requestNetData2();
},
child: const Text(
"点击按钮2",
)),
/// OutlinedButton 封装好的点击按钮 onPressed
OutlinedButton(
onPressed: () {
ToastUtils.show("点击事件3");
NetworkUtils.requestNetData(5,callback:requestNetData3 );
},
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(color: Colors.black, width: 2))),
child: const Text(
"点击按钮3",
)),
/// GestureDetector onTap
GestureDetector(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
Assets.assetsMeisi,
width: 20,
height: 20,
fit: BoxFit.cover,
),
Text("点击按钮4")
],
),
onTap: () {
ToastUtils.show("点击事件4");
},
)
],
),
decoration: const ShapeDecoration(
///color: Colors.white,
///设置渐变色
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.white, Colors.blue]),
/// 设置背景颜色
shape: RoundedRectangleBorder(
/// 设置背景角度
borderRadius: BorderRadius.all(Radius.circular(10)))),
),
);
}
}
六、d窗提示。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tykt/demo/example02/self_build_dialog.dart';
import 'package:flutter_tykt/utils/toast.dart';
class Part006DemoPage extends StatefulWidget {
const Part006DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part006DemoState();
}
}
class Part006DemoState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: Column(
children: [
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
showAlertDialog(context);
},
child: Text("AlertDialogd窗提示"),
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
showSimpleDialog(context);
},
child: Text("SimpleDialogd窗提示"),
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
showBottomDialog(context);
},
child: Text("BottomDialogd窗提示"),
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
showSelfBuildDialog(context);
},
child: Text("自定义d窗提示"),
),
),
],
),
);
}
/// AlertDialog
void showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text("标题标题标题标"),
content: const Text("内内容内容内容内容容内内容内容内容内容容内内容内容内容内容容"),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))),
actions: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("取消")),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text("确定")),
],
);
});
}
/// SimpleDialog
void showSimpleDialog(BuildContext context) {
showDialog(
context: context,
builder: (context) {
return SimpleDialog(
title: Text("提示"),
children: [
TextButton(
onPressed: () {
ToastUtils.show("选项一");
},
child: const Text("选项一")),
TextButton(
onPressed: () {
ToastUtils.show("选项二");
},
child: const Text("选项二")),
TextButton(
onPressed: () {
ToastUtils.show("选项三");
},
child: const Text("选项三")),
],
);
});
}
/// BottomDialog
void showBottomDialog(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
return SizedBox(
height: 200,
child: Column(
children: [
ListTile(
leading: const Icon(Icons.settings),
title:const Text("设置"),
onTap: () => Navigator.pop(context),
),
ListTile(
leading:const Icon(Icons.home),
title:const Text("主页"),
onTap: () => Navigator.pop(context),
),
ListTile(
leading:const Icon(Icons.message),
title:const Text("消息"),
onTap: () => Navigator.pop(context),
),
],
),
);
});
}
/// 自定义dianlog
void showSelfBuildDialog(BuildContext context){
showDialog(context: context, builder: (context){
return SelfBuildDialog();
});
}
}
七、视频播放组件
import 'package:chewie/chewie.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
import '../../utils/device_utils.dart';
class Part007DemoPage extends StatefulWidget {
const Part007DemoPage({Key? key}) : super(key: key);
@override
State createState() {
return Part007DemoState();
}
}
class Part007DemoState extends State {
late Chewie playerWidget;
final String videoUrl =
"https://auto.pcvideo.com.cn/oss/pcauto/vpcauto/2021/12/22/1640174601272-vpcauto-75886-1_3.mp4";
late VideoPlayerController videoPlayerController;
late ChewieController chewieController;
@override
void initState() {
// TODO: implement initState
super.initState();
initVideoPlay();
}
bool isInitFinish = false;
/// 初始化视频播放控件
initVideoPlay() async {
videoPlayerController = VideoPlayerController.network(videoUrl);
await videoPlayerController.initialize().then((value) => {
chewieController = ChewieController(
videoPlayerController: videoPlayerController,
autoPlay: false,
looping: true,
aspectRatio: videoPlayerController.value.aspectRatio),
isInitFinish = true,
if (mounted) {setState(() {})}
});
}
@override
Widget build(BuildContext context) {
double height = 200;
if (isInitFinish) {
/// 视频播放器 widget
playerWidget = Chewie(
controller: chewieController,
);
double ratio = chewieController.aspectRatio ?? 1;
double width =
DeviceUtils.px2dip(context, DeviceUtils.getScreenSize().width);
height = width / ratio;
}
return Scaffold(
appBar: AppBar(
title: Text(""),
),
body: isInitFinish
? Column(
children: [
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
chewieController.play();
},
child: Text("视频播放"),
),
),
Container(
margin: EdgeInsets.all(20),
child: ElevatedButton(
onPressed: () {
chewieController.pause();
},
child: Text("暂停播放"),
),
),
SizedBox(
height: height,
child: playerWidget,
),
],
)
: Text("sdsdsd"),
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
videoPlayerController.dispose();
chewieController.dispose();
}
}
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）