Skip to content

F
flutter-demo
Commit 9816c562 by 杜長金
Options

學習到第26節

parent 91e8adbb
Showing with 567 additions and 9 deletions
lib/layout_demo.dart 0 → 100644
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("佈局類型"),
),
body: Container(
color: Colors.grey,
/* child: Column(//豎向排列
children: [
Container(
color: Colors.red,
width: 100,
height: 100,
),
Container(
color: Colors.green,
width: 150,
height: 100,
),
Container(
color: Colors.yellow,
width: 100,
height: 100,
),
],
),*/
/*child: Row(
//橫向排列
//textDirection: TextDirection.ltr, //排序方式
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
color: Colors.red,
width: 100,
height: 200,
),
Container(
color: Colors.green,
width: 150,
height: 100,
),
Container(
color: Colors.yellow,
width: 100,
height: 100,
),
],
),*/
/*child: Flex(//彈性佈局
direction: Axis.vertical,
children: [
Expanded(
child: Container(
color: Colors.red,
width: 100,
height: 200,
),
flex: 1,
),
Expanded(
child: Container(
color: Colors.green,
width: 150,
height: 100,
),
flex: 2,
),
Container(
color: Colors.yellow,
width: 100,
height: 100,
),
],
), */
//child: wrapDemo(), //流式佈局
child: StackDemo(), //層疊佈局
),
);
}
}
class wrapDemo extends StatefulWidget {
@override
State<wrapDemo> createState() => _wrapDemoState();
}
class _wrapDemoState extends State<wrapDemo> {
List<int> list = [];
@override
void initState() {
super.initState();
for (var i = 0; i < 20; i++) {
list.add(i);
}
}
Widget build(BuildContext context) {
return Wrap(
direction: Axis.vertical,
alignment: WrapAlignment.center,
spacing: 10,
runSpacing: 10,
children: list
.map((e) => Container(
height: 100,
width: 100,
child: Text(e.toString()),
color: Colors.blue,
))
.toList(),
);
}
}
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: AlignmentDirectional.topEnd,
children: [
Container(
color: Colors.green,
width: 100,
height: 100,
),
Container(
color: Colors.red,
width: 50,
height: 100,
),
Positioned(
//width: 200,
//height: 200,
child: Container(
color: Colors.yellow,
),
top: 10,
bottom: 10,
left: 10,
right: 10,
),
],
);
}
}
lib/main.dart
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_one/layout_demo.dart';
import 'package:flutter_one/navigator.dart';
import 'package:flutter_one/widget_all.dart';
main() { main() {
runApp(MyApp()); runApp(MyApp());
...@@ -9,15 +12,27 @@ class MyApp extends StatelessWidget { ...@@ -9,15 +12,27 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
home: Container( home: LayoutDemo(),
child: HomePage(),
),
); );
} }
} }
class HomePage extends StatelessWidget { class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("組件集合"),
),
body: InputDemo(),
);
}
}
/*class HomePage extends StatelessWidget {
List tabs = ["全部", "待付款", "點評/投票"]; List tabs = ["全部", "待付款", "點評/投票"];
List lists = ["第一行", "第二行", "第三行"];
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return new DefaultTabController( return new DefaultTabController(
...@@ -25,20 +40,103 @@ class HomePage extends StatelessWidget { ...@@ -25,20 +40,103 @@ class HomePage extends StatelessWidget {
child: new Scaffold( child: new Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text('我的訂單'), title: Text('我的訂單'),
bottom: TabBar( backgroundColor: Color.fromARGB(255, 172, 4, 4),
//生成Tab菜单 bottom: PreferredSize(
tabs: tabs.map((e) => Tab(text: e)).toList()), preferredSize: Size.fromHeight(50),
child: Material(
color: Colors.white,
child: TabBar(
//生成Tab菜单
indicatorColor: Color.fromARGB(255, 172, 4, 4),
unselectedLabelColor: Color.fromRGBO(1, 1, 1, 1),
labelColor: Color.fromARGB(255, 172, 4, 4),
tabs: tabs
.map((e) => Tab(
text: e,
height: 50.0,
))
.toList()),
),
),
), ),
body: new TabBarView( body: new TabBarView(
children: tabs.map((e) { children: tabs.map((e) {
//分别创建对应的Tab页面 //分别创建对应的Tab页面
return Container( return Container(
alignment: Alignment.center, alignment: Alignment.center,
child: Text(e, textScaleFactor: 5), child: RefreshIndicator(
child: ListView(
children: [
Column(
children: [
ListTile(
title: Row(
children: [
Text(lists[0]),
],
),
subtitle: Container(
child: Text("备注"),
),
leading: Container(
color: Colors.yellow,
child: Image.asset("images/0.jpg"),
),
trailing: Container(
child: Text("订单已取消"),
),
//ListTile左边图表
onTap: () {
ClickTile();
print("onTap");
},
),
],
),
ListTile(
title: Text(lists[0]),
leading: Icon(Icons.add), //ListTile左边图表
tileColor:
Color.fromARGB(255, 238, 239, 238), //ListTile背景色
subtitle: Text("这是备注"),
onTap: () {
ClickTile();
print("onTap");
},
),
ListTile(
title: Text(lists[0]),
leading: Icon(Icons.add), //ListTile左边图表
tileColor:
Color.fromARGB(255, 238, 239, 238), //ListTile背景色
subtitle: Text("这是备注"),
onTap: () {
ClickTile();
print("onTap");
},
),
],
),
onRefresh: _onRefresh),
); );
}).toList(), }).toList(),
), ),
), ),
); );
} }
Future _onRefresh() async {
//自定义方法执行下拉操作
await Future.delayed(Duration(seconds: 3), () {
print("3秒后输出");
});
return "";
}
} }
class ClickTile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}*/
lib/navigator.dart 0 → 100644
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("登录"),
),
body: ElevatedButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return MenuPage(
title: "菜单123",
);
},
//maintainState: false, //是否释放内存
//fullscreenDialog: true, //是否present跳转
),
).then((value) => print(value));
},
child: Text("登录")),
);
}
}
class MenuPage extends StatelessWidget {
final String title;
const MenuPage({Key? key, required this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: ElevatedButton(
onPressed: () {
Navigator.of(context).pop({"name": "666"});
},
child: Text("返回")),
);
}
}
lib/widget_all.dart 0 → 100644
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
//文本
class TextDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
color: Colors.green,
child: Text(
"文本",
maxLines: 1,
overflow: TextOverflow.ellipsis,
//textAlign: TextAlign.center,
textDirection: TextDirection.rtl,
style: TextStyle(
color: Colors.white,
),
),
);
}
}
//按鈕
class ButtonDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {},
child: Text("漂浮按鈕"),
),
TextButton(
onPressed: () {},
child: Text("扁平按鈕"),
),
TextButton.icon(
onPressed: () {},
icon: Image.asset(
"images/0.jpg",
width: 30,
height: 30,
),
label: Text(
"data",
),
),
OutlinedButton(
onPressed: () {},
child: Text("OutlineButton"),
),
OutlinedButton.icon(
onPressed: () {},
icon: Icon(Icons.abc_rounded),
label: Text("OutlineButton.icon")),
IconButton(
onPressed: () {},
icon: Icon(Icons.share),
),
],
);
}
}
//圖片icon
class ImageIconDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
Icon(Icons.add),
IconButton(
onPressed: () {},
icon: Icon(Icons.add_alarm),
),
Container(
width: double.infinity,
child: Image.network(
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652583854&t=81e7f0d01114c2a9255add7319fa76c9",
fit: BoxFit.fitWidth,
),
),
SizedBox(
height: 20,
),
Container(
child: Image.asset(
"images/0.jpg",
width: 100,
),
alignment: Alignment.centerLeft,
)
],
);
}
}
//开关复选框
class CheckDemo extends StatefulWidget {
@override
State<CheckDemo> createState() => _CheckDemoState();
}
class _CheckDemoState extends State<CheckDemo> {
bool _check = false;
bool _switch = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
Checkbox(
value: _check,
shape: CircleBorder(),
onChanged: (v) {
setState(() {
_check = v!;
});
}),
Switch(
value: _switch,
onChanged: (v) {
setState(() {
_switch = v;
});
}),
],
);
}
}
//進度指示器
class ProgressDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
LinearProgressIndicator(
//value: 1,
valueColor: AlwaysStoppedAnimation(Color.fromARGB(255, 176, 233, 7)),
),
SizedBox(
height: 20,
),
Container(
width: 100,
height: 100,
child: CircularProgressIndicator(
//value: 0.5,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
SizedBox(
height: 20,
),
CupertinoActivityIndicator(
color: Color.fromARGB(255, 20, 2, 212),
),
],
);
}
}
//點擊事件
class ClickDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("tag");
},
onDoubleTap: () {
print("double tag");
},
child: Text("點擊"),
);
}
}
//表单输入框
class InputDemo extends StatefulWidget {
@override
State<InputDemo> createState() => _InputDemoState();
}
class _InputDemoState extends State<InputDemo> {
GlobalKey _key = GlobalKey<FormState>();
TextEditingController _user = TextEditingController();
TextEditingController _pass = TextEditingController();
FocusNode _u = FocusNode();
FocusNode _p = FocusNode();
FocusScopeNode? _focusScopeNode;
@override
void dispose() {
if (_focusScopeNode != null) {
_focusScopeNode?.dispose();
}
_u.dispose();
_p.dispose();
_user.dispose();
_pass.dispose();
super.dispose();
}
Widget build(BuildContext context) {
return Form(
key: _key,
child: Column(
children: [
TextFormField(
autofocus: true,
focusNode: _u,
controller: _user,
decoration: InputDecoration(
//icon: Icon(Icons.abc),
prefixIcon: Icon(Icons.abc),
labelText: "username",
hintText: "请输入用户名",
),
validator: (v) {
if (v == null || v.isEmpty) {
return "用户名必须输入!";
}
},
textInputAction: TextInputAction.next,
),
SizedBox(
height: 20,
),
TextFormField(
focusNode: _p,
controller: _pass,
decoration: InputDecoration(
//icon: Icon(Icons.abc),
prefixIcon: Icon(Icons.abc),
labelText: "password",
hintText: "请输入密码",
),
obscureText: true,
validator: (v) {
if (v == null || v.length < 5) {
return "密码必须输入且大于5";
}
},
textInputAction: TextInputAction.send,
),
ElevatedButton(
onPressed: () {
if (_focusScopeNode == null) {
_focusScopeNode = FocusScope.of(context);
}
_focusScopeNode?.requestFocus(_u); //跳到某个焦点
//_focusScopeNode.unfocus(); //去掉焦点
print((_key.currentState as FormState).validate().toString());
},
child: Text("提交")),
],
),
);
}
}
pubspec.yaml
...@@ -58,8 +58,8 @@ flutter: ...@@ -58,8 +58,8 @@ flutter:
uses-material-design: true uses-material-design: true
# To add assets to your application, add an assets section, like this: # To add assets to your application, add an assets section, like this:
# assets: assets:
# - images/a_dot_burr.jpeg - images/0.jpg
# - images/a_dot_ham.jpeg # - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment