flutter
-
ListView垂直列表
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: [R
ListTile(
title: Text('吉安大街那边还得把恨不得把R身边的'),
subtitle: Text('samkdmkasmd'),
leading: Icon(Icons.satellite), //前面图标
trailing: Icon(Icons.ac_unit_sharp), //后面图标
),
ListTile(
title: Text('dasdada'),
subtitle: Text('samkdmkasmd'),
leading: Image.asset('images/login/drawable-mdpi/logo2.png'), //本地图片或者远程图片
trailing: Icon(Icons.ac_unit_sharp), //后面图标
),
],
scrollDirection: Axis.vertical //垂直方向
);
}
}
-
ListView水平列表
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 200,
width:200,
child:ListView(
scrollDirection: Axis.horizontal, //水平方向
children: [
Container(
width: 50,
decoration: BoxDecoration(color: Colors.red),
),
Container(
width: 50,
decoration: BoxDecoration(color: Colors.yellow),
),
Container(
width: 50,
decoration: BoxDecoration(color: Colors.blue),
),
Container(
width: 50,
decoration: BoxDecoration(color: Colors.black),
),
Container(
width: 50,
decoration: BoxDecoration(color: Colors.black),
),
Container(
width: 50,
decoration: BoxDecoration(color: Colors.black),
),
],
)
),
);
}
}
-
动态渲染
ListTitle
var list = [
{
"title":'asdad',
"subtitle":"dasjudhashdu"
},
{
"title":'asdad',
"subtitle":"dasjudhashdu"
},
{
"title":'asdad',
"subtitle":"dasjudhashdu"
}
];
class Login extends StatelessWidget {
//动态渲染数据函数
List<Widget> _listData() { // 返回值为。List<widget> 类型
var listt = list.map((item){ //map返回的是（‘da’,'ad'）类型
return ListTile(
title: Text(item["title"]),
subtitle: Text(item["subtitle"])
);
});
return listt.toList();//转成List 类型
}
@override
Widget build(BuildContext context) {
return ListView(
children: this._listData(),
);
}
}
-
通过。
ListView.builder
import 'dart:ui';
import 'package:flutter/material.dart';
import 'dart:core';
main(List<String> args) {
runApp(myApp());
}
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("叮咚"),
),
body: Login()),
);
}
}
var list = [
{
"title":'asdad',
"subtitle":"dasjudhashdu"
},
{
"title":'asdad',
"subtitle":"dasjudhashdu"
},
{
"title":'asdad',
"subtitle":"dasjudhashdu"
}
];
class Login extends StatelessWidget {
List listt;
//构造函数
Login(){
//动态渲染数据函数
this.listt = (list.map((item) {
return ListTile(
title: Text(item["title"]),
subtitle: Text(item["subtitle"]),
);
})).toList(); //转成list
}
@override
Widget build(BuildContext context) {
return ListView.builder(itemBuilder: //通过ListView.builder来遍历
(context, index) {
return this.listt[index];
}
,itemCount: this.listt.length);
}
}
-
GridView布局 ---网格布局
import 'dart:ui';
import 'package:flutter/material.dart';
import 'dart:core';
main(List<String> args) {
runApp(myApp());
}
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("叮咚"),
),
body: Login()),
);
}
}
var list = [
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"},
{"title": 'asdad', "subtitle": "dasjudhashdu"}
];
class Login extends StatelessWidget {
List<Widget> _getData() {
return (list.map((item) {
return Container(
height: 200,
width: 200,
decoration:
BoxDecoration(border: Border.all(color: Colors.black, width: 1)),
child: Column(
children: <Widget>[
Text(
item["title"], //内容
textAlign: TextAlign.center, //剧中
style: TextStyle( //style
fontSize: 20 //字体
),
),
SizedBox(height: 10),
Image.asset("images/login/drawable-mdpi/logo2.png"),
],
),
alignment: Alignment.center,
);
})).toList();
}
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: 2, //2列
crossAxisSpacing: 10, //交叉轴间距
mainAxisSpacing: 10, // 主轴间距
padding: EdgeInsets.all(10), //内边距
children: this._getData(), //子元素
);
}
}
-
有些组件是没有padding属性的，所以有了
padding组件
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding( //让整体的gridView 距离手机又一个外边句
padding: EdgeInsets.all(10), //内边距
child: GridView.count( //child中放组件
crossAxisCount: 2,
children: [
Container(
height: 200,
width: 200,
decoration: BoxDecoration(border: Border.all(width: 1)),
child: Image.asset("images/login/drawable-mdpi/logo2.png"),
),
Container(
height: 200,
width: 200,
decoration: BoxDecoration(border: Border.all(width: 1)),
child: Image.asset("images/login/drawable-mdpi/logo2.png"),
),
],
),
);
}
}
-
水平组件--->
Row和垂直组件--->Column. --相当于flex布局
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //主轴的排列
crossAxisAlignment: CrossAxisAlignment.start, //交叉轴排列
children: [
IcomDynamic(Icons.access_alarm),
IcomDynamic(Icons.sanitizer,color: Colors.black,size: 20,),
IcomDynamic(Icons.access_time_outlined),
],
);
}
}
/**
* 自定义的动态传入的图标组件
*
*/
class IcomDynamic extends StatelessWidget {
IconData icon ;
Color color = Colors.red;
double size = 500.0;
IcomDynamic(this.icon, {this.color, this.size});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
child: Center(
child:Icon(
this.icon,
color: this.color,
size:this.size
)
),
decoration: BoxDecoration(color: Colors.red),
);
}
}
-
定位布局
Stack组件和Align和positiond-
stack和Align结合，实现定位布局【alignment: Alignment(0,0):表示中间，1表示最右侧，-1，表示最左侧其他数值以此类推】
-
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack( //定位布局（相对于Stack的父元素）
children: <Widget>[
Align(
alignment: Alignment(1,1),
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
Align(
alignment: Alignment(0,1), //控制距离
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
Align(
alignment: Alignment(1,0),
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
]
);
}
}
-
StackcombinePositionedcomplete layoutpostionedthrough top&& left && right && bottom complete layout
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack( //定位布局（相对于Stack的父元素）
children: <Widget>[
Positioned(
top: 0,
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
Positioned(
left:0,
top: 100,
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
Positioned(
top: 0,
right: 0,
child:Container(
height: 50,
width: 50,
decoration: BoxDecoration(color:Colors.red),
)
),
]
);
}
}
-
AspectRatio规定子元素的宽高比，常用图片 -
Card卡片，有默认的box-shadow效果
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView( //ListView内部不能再嵌套ListView
children: [
Card(
margin:EdgeInsets.all(10),
child:Column(
children: [
ListTile(
title: Text('张鑫'),
subtitle: Text('软件工程师'),
),
ListTile(
title: Text('电话'),
subtitle: Text('121u89393'),
),
ListTile(
title: Text('地址'),
subtitle: Text('安徽省合肥市安徽建筑大学'),
),
],
),
shadowColor: Colors.red, //shadow颜色
),
Card(
margin:EdgeInsets.all(10),
child:Column(
children: [
AspectRatio(aspectRatio: 2/1,child:Image.asset("images/login/drawable-mdpi/logo2.png")),
ListTile(
leading: Image.asset("images/login/drawable-mdpi/logo2.png"),
title:Text('撒大'),
subtitle:Text("dsadhjajd")
)
],
),
shadowColor: Colors.red, //shadow颜色
),
Card(
margin:EdgeInsets.all(10),
child:Column(
children: [
ListTile(
title: Text('申遗响'),
subtitle: Text('软件工程师'),
),
ListTile(
title: Text('电话'),
subtitle: Text('121u89393'),
),
ListTile(
title: Text('地址'),
subtitle: Text('安徽省合肥市安徽建筑大学'),
),
],
),
shadowColor: Colors.red, //shadow颜色
),
],
);
}
}
container 和 Text 相关属性
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main(List<String> args) {
runApp(myApp());
}
class myApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("叮咚"),
),
body:HomeCenter()
),
theme: ThemeData(
primarySwatch: Colors.blue
),
);
}
}
class HomeCenter extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text(
"你好哥哥asdasdasdsadddddddddddddddddddddas",
textDirection: TextDirection.rtl, //文字方向
style: TextStyle( //字体样式
fontSize: 20.0,
color: Colors.red
),
textAlign:TextAlign.center, //对其方式
maxLines:2,
overflow: TextOverflow.ellipsis,
),
height: 200.0,
width: 200.0,
decoration: BoxDecoration( //背景相关以及边框
color: Colors.blue, //背景颜色
border: Border.all( //边框
color: Colors.red,
width: 2,
),
borderRadius: BorderRadius.all( //边框圆角
Radius.circular(20)
),
),
margin: EdgeInsets.fromLTRB(10, 12, 23, 1), //margin
padding: EdgeInsets.all(20), //padding
alignment: Alignment.bottomRight, //内部元素的显示方式
),
);
}
}
image相关属性
class HomeCenter extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
height: 300,
width: 300,
padding: EdgeInsets.all(0),
decoration: BoxDecoration(
border: Border.all(
color: Colors.red,
width: 1
)
),
: Image.network(
'https://www.itying.com/themes/itying/images/typescript/flutter.png',
alignment: Alignment.topCenter, //图片在容器中的位置
fit: BoxFit.fitWidth, //图片在容器中的位置以及拉升
// repeat:ImageRepeat.repeatX , //重复
),
),
);
}
}
-
ClipOval来切圆形
ClipOval(
child: Image.asset(
"images/login/drawable-mdpi/logo2.png",
fit: BoxFit.cover,
)
-
CircleAvatar处理头像
CircleAvatar(
backgroundImage:AssetImage('images/login/drawable-mdpi/logo2.png'),
)
-
Wrap组件，流式布局会自动换行
class Login extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Wrap(
children:[
MyButton('text'),
MyButton('text'),
MyButton('text'),
MyButton('teasdasxt'),
MyButton('texasdat'),
MyButton('text'),
MyButton('text'),
],
spacing: 5, //交叉轴间距
runSpacing: 4,// 主轴与元素间的间距
alignment: WrapAlignment.spaceEvenly, //主轴方向的总体
runAlignment: WrapAlignment.spaceBetween, //交叉轴总体
);
}
}
//自定义一个封装好的按钮
class MyButton extends StatelessWidget {
final String text;
MyButton(this.text);
@override
Widget build(BuildContext context) {
return new RaisedButton(
child: Text(this.text),
textColor: Colors.red,
onPressed: () {
},
);
}
}
-
RaisedButton组件 按钮
//自定义一个封装好的按钮
class MyButton extends StatelessWidget {
final String text;
MyButton(this.text);
@override
Widget build(BuildContext context) {
return new RaisedButton(
child: Text(this.text),
textColor: Colors.red,
onPressed: () {
},
);
}
}
flutter 中的有状态组件statefulwidget
import 'dart:ui';
import 'package:flutter/material.dart';
import 'dart:core';
main(List<String> args) {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("叮咚"),
),
body: Login()),
);
}
}
class Login extends StatefulWidget {
Login({Key key}) : super(key: key);
@override
_LoginState createState() => _LoginState();
}
class _LoginState extends State<Login> {
String name = 'sdadad'; //数据
@override
Widget build(BuildContext context) {
return ListView(
children: [
Column(children:[
Text(this.name)
] ),
RaisedButton(
child: Text('点击'),
onPressed: (){ //点击事件
setState(() {
if(this.name == 'xin') {
this.name = 'zhang';
}else{
this.name = 'xin';
}
});
},
)
],
);
}
}
-
底部导航
bottomNavigationBar
import 'dart:developer';
import 'package:flutter/material.dart';
//引入四个组件
import 'package:flutter_app/pages/components/Contact.dart';
import 'package:flutter_app/pages/components/Home.dart';
import 'package:flutter_app/pages/components/Profile.dart';
import 'package:flutter_app/pages/components/Dynamic.dart';
class Tap extends StatefulWidget {
Tap({Key key}) : super(key: key);
@override
_TapState createState() => _TapState();
}
class _TapState extends State<Tap> {
int currentIndex ;
//默认图片的颜色
String homePath = "images/common/drawable-mdpi/nav_btn_home_default.png";
String contactPath = "images/common/drawable-mdpi/nav_btn_linkman_default.png";
String dynamicPath = "images/common/drawable-mdpi/nav_btn_dynamic_default.png";
String profilePath = "images/common/drawable-mdpi/nav_btn_my_default.png";
//切换navagation
List navigation = [
Home(),
Contact(),
Dynamic(),
Profile()
];
//初始化
@override
void initState() {
super.initState();
this.currentIndex = 0;
this.handIconPath(this.currentIndex); //初始化第一个被显示
}
//加载图标函数
void handIconPath(int index){
//切换颜色
switch (index) {
case 0:
setState(() {
this.homePath = "images/common/drawable-mdpi/nav_btn_home_selected.png";
this.contactPath = "images/common/drawable-mdpi/nav_btn_linkman_default.png";
this.dynamicPath = "images/common/drawable-mdpi/nav_btn_dynamic_default.png";
this.profilePath = "images/common/drawable-mdpi/nav_btn_my_default.png";
});
break;
case 1:
setState(() {
this.homePath = "images/common/drawable-mdpi/nav_btn_home_default.png";
this.contactPath = "images/common/drawable-mdpi/nav_btn_linkman_selected.png";
this.dynamicPath = "images/common/drawable-mdpi/nav_btn_dynamic_default.png";
this.profilePath = "images/common/drawable-mdpi/nav_btn_my_default.png";
});
break;
case 2:
setState(() {
this.homePath = "images/common/drawable-mdpi/nav_btn_home_default.png";
this.contactPath = "images/common/drawable-mdpi/nav_btn_linkman_default.png";
this.dynamicPath = "images/common/drawable-mdpi/nav_btn_dynamic_selected.png";
this.profilePath = "images/common/drawable-mdpi/nav_btn_my_default.png";
});
break;
case 3:
setState(() {
this.homePath = "images/common/drawable-mdpi/nav_btn_home_default.png";
this.contactPath = "images/common/drawable-mdpi/nav_btn_linkman_default.png";
this.dynamicPath = "images/common/drawable-mdpi/nav_btn_dynamic_default.png";
this.profilePath = "images/common/drawable-mdpi/nav_btn_my_selected.png";
});
break;
default:
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("叮咚"),
),
body: this.navigation[this.currentIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: this.currentIndex, //默认显示第几个
onTap: (int index) { //点击切换
setState(() {
this.currentIndex = index;
this.handIconPath(this.currentIndex);
});
},
items: [
BottomNavigationBarItem(icon: Image.asset(this.homePath), title: Text('通话')),
BottomNavigationBarItem(icon: Image.asset(this.contactPath), title: Text('联系人')),
BottomNavigationBarItem(icon: Image.asset(this.dynamicPath), title: Text('动态')),
BottomNavigationBarItem(icon: Image.asset(this.profilePath),title: Text('我的',),),
],
fixedColor: Colors.red, //选中颜色
type: BottomNavigationBarType.fixed, //类型
),
);
}
}
-
flutter 中的路由跳转
1，被跳转的页面被scaffold包裹
2, 跳转页面要引入被跳转页面
3，都是包裹在跟
MaterialApp下
//1,普通的路由跳转
import 'pages/routerPages/Search.dart';
return Container(
child: RaisedButton(
child: Text('跳转'),
onPressed: (){ //普通路由跳转
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => Search(),)
);
},
),
);
-
命名路由跳转
1,在
MaterailApp中配置路由
//2，命名路由跳转
import 'pages/routerPages/Search.dart';
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body:Home(),
),
routes: { //配置路由。也可以单独抽离出去
'/home':(context) => Search(),
},
);
2,通过`navagator`跳转（不用一定包裹在scafolld中）
return Container(
child: RaisedButton(
child: Text('跳转'),
onPressed: (){ //命名路由跳转
Navigator.pushNamed(context, '/home'); //跳转
},
),
);
3,通过命名路由跳转并传参数
**mian.dart**
import 'package:flutter/material.dart';
import 'router/index.dart'; //引入抽离出去的路由表
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
onGenerateRoute: OnGenerateRoute, //路由表
);
}
}
router/idnex.dart
import 'package:flutter/material.dart';
import '../pages/routerPages/Other.dart';
import '../pages/routerPages/Search.dart';
import '../pages/routerPages/Home.dart';
final routes = {
'/':(context) => Home(),
'/search':(context,{arguments}) => Search(arguments:arguments), //要传值
'/other':(context) => Other(), //不用传值
};
//固定写法(命名路由传参数)
var OnGenerateRoute = (RouteSettings settings) {
//统一处理
final String name = settings.name;
final Function pageContentBuilder = routes[name];
if(pageContentBuilder != null) {
if(settings.arguments != null) {
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context, arguments:settings.arguments)
);
return route;
}else{
final Route route = MaterialPageRoute(
builder: (context) => pageContentBuilder(context)
);
return route;
}
}
};
search.dart
import 'package:flutter/material.dart';
class Search extends StatefulWidget {
// 构造函数初始化，接受arguments
Map arguments = {"id":1};
Search({this.arguments});
@override
//把arguments 传递给_SearchState
_SearchState createState() => _SearchState(arguments:this.arguments);
}
class _SearchState extends State<Search> {
// 初始化传递过来的arguments
Map arguments;
_SearchState({this.arguments});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text('搜索')),
body: Center(
child: Column(
children: [
Text("${this.arguments['id']}")
],
),
),
);
}
}
home.dart
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
),
body: Column(children: [
RaisedButton(
child: Text('跳转到并传值'),
onPressed: () {
//命名路由跳转
Navigator.pushNamed(context, '/search',
arguments: {"id": '传递过来的id'});
},
),
RaisedButton(
child: Text('跳转到其他'),
onPressed: () {
//命名路由跳转
Navigator.pushNamed(context, '/other',);
},
),
]),
);
}
}
other.dart
import 'package:flutter/material.dart';
class Other extends StatefulWidget {
Other({Key key}) : super(key: key);
@override
_OtherState createState() => _OtherState();
}
class _OtherState extends State<Other> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('其他'),
),
body: Container(
child: Text('oher'),
),
);
}
}
-
路由的切换，进栈出栈，(命名路由)
//push并传参 Navigator.pushNamed(context, '/search',arguments: {"id": '传递过来的id'}); //pop不传参 Navigator.pop(context); //replace不传参数 替换当前路由为'/other' Navigator.pushReplacementNamed(context, '/other'); AppBar,底部导航自定义
debugShowCheckedModeBanner: false, //去掉debug按钮-
使用顶部tabbar切换
1,在Scaffold外面包裹DefaultTabController并配置其长度legth
2,bottom中增加TabBar组件,数量与长度对应
3,body中TabBarView中对应显示其组件
import 'dart:developer'; import 'package:flutter/material.dart'; import '../routerPages/Home.dart'; class Other extends StatefulWidget { Other({Key key}) : super(key: key); @override _OtherState createState() => _OtherState(); } class _OtherState extends State<Other> { @override Widget build(BuildContext context) { return DefaultTabController( length: 2, //顶部tabbar长度 child: Scaffold( appBar : AppBar( title: Text('其他'), backgroundColor: Colors.blue, bottom: TabBar( tabs: [ Tab(text:'左边的'), Tab(text:'右边的'), ], indicatorColor: Colors.red, //滑动条颜色 labelColor: Colors.red, unselectedLabelColor: Colors.grey, //tab字没选中的颜色 ), actions: [ //右边图标按钮 IconButton(icon: Icon(Icons.settings), onPressed: null) ], ), body: TabBarView( //对应显示内容 children: [ Text('左边的内容'), Text('右边的内容') ], ), ), ); } } 头部
AppBar的左右图标
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('首页'),
centerTitle: true, //剧中显示
leading: IconButton( //左侧按钮图标
icon: Icon(Icons.search),
onPressed: () {
//点击事件
},
),
actions: [ //右侧按钮图标
IconButton(
icon: Icon(Icons.ac_unit_rounded),
onPressed: () {
//点击事件
},
),
],
),
body: Column(children: [
RaisedButton(
child: Text('跳转到并传值'),
onPressed: () {
//命名路由跳转
Navigator.pushNamed(context, '/search',
arguments: {"id": '传递过来的id'});
},
),
RaisedButton(
child: Text('跳转到其他'),
onPressed: () {
//命名路由跳转
Navigator.pushNamed(
context,
'/other',
);
},
),
]),
);
}
}
-
自定义顶部的
TabBarimport 'package:flutter/material.dart'; class Test extends StatefulWidget { Test({Key key}) : super(key: key); @override _TestState createState() => _TestState(); } //1，多继承于SingleTickerProviderStateMixin class _TestState extends State<Test> with SingleTickerProviderStateMixin{ // 2，定义一个_tabController TabController _tabController; //3，初始化_tabController @override void initState() { super.initState(); _tabController = new TabController( vsync: this, length: 2, ); //监听事件 _tabController.addListener(() { print('切换事件'); print(_tabController.index); }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('test页面'), bottom: TabBar( controller: this._tabController, tabs: [ Tab(text:'页面一'), Tab(text: "页面二") ] ), ), body: TabBarView( controller: this._tabController, children: [ Text('哦爱上多久啊是'), Text('哦爱上多久啊是') ], ), ); } } -
侧边栏（
Drawer）import 'package:flutter/material.dart'; class Drawerr extends StatefulWidget { Drawerr({Key key}) : super(key: key); @override _DrawerState createState() => _DrawerState(); } class _DrawerState extends State<Drawerr> { int currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:Text('抽屉组件实例'), ), drawer: Drawer( //抽屉组件 child: Column( children: [ UserAccountsDrawerHeader( //头部 accountName: Text('新'), accountEmail: Text('1231@qq.com'), decoration: BoxDecoration( image: DecorationImage( image:NetworkImage('https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1672835034,1341398140&fm=26&gp=0.jpg',) ) ), ), Expanded(child: Text('sad'),flex:1) ], ) ), bottomNavigationBar: BottomNavigationBar( // 底部navagation导航栏 items: [ BottomNavigationBarItem(icon: Icon(Icons.ac_unit_outlined),title: Text('首页 ',textAlign: TextAlign.center,)), BottomNavigationBarItem(icon: Icon(Icons.ac_unit_outlined),title: Text('联系人 ',textAlign: TextAlign.center)), BottomNavigationBarItem(icon: Icon(Icons.ac_unit_outlined),title: Text('动态 ',textAlign: TextAlign.center)), BottomNavigationBarItem(icon: Icon(Icons.ac_unit_outlined),title: Text('个人 ',textAlign: TextAlign.center)), ], currentIndex: this.currentIndex, //当前的索引 onTap: (int index) { //点击切换 setState(() { this.currentIndex = index; }); }, type: BottomNavigationBarType.fixed, //四个以上配置类型 ), ); } } 按钮合集
import 'package:flutter/material.dart';
class ButtonTest extends StatefulWidget {
ButtonTest({Key key}) : super(key: key);
@override
_ButtonTestState createState() => _ButtonTestState();
}
class _ButtonTestState extends State<ButtonTest> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('button示范')),
body: Container(
//要动态设置button的宽高，在外面包一层container
child: Column(
children: [
RaisedButton( //普通按钮
child: Text('Hello'),
color: Colors.blue,
textColor: Colors.red,
elevation: 20,
onPressed: () {
},
),
RaisedButton.icon( //图标按钮
icon: Icon(Icons.sanitizer),
label: Text('图标按钮'),
onPressed: () {
},
),
RaisedButton( //圆角按钮
child: Text('圆角按钮'),
color: Colors.blue,
textColor: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
splashColor: Colors.red,
elevation: 20,
),
FloatingActionButton( //浮动按钮
child: Icon(Icons.sanitizer), //子视图，一般推荐用图标
backgroundColor:Colors.red,
elevation: 20,
highlightElevation: 30,
),
],
)
),
);
}
}
- 输入框
TextField，单选框checkBox， 复选框radio
import 'package:flutter/material.dart';
class ButtonTest extends StatefulWidget {
ButtonTest({Key key}) : super(key: key);
@override
_ButtonTestState createState() => _ButtonTestState();
}
class _ButtonTestState extends State<ButtonTest> {
bool flag = false;
String sex = "";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('button示范')),
body: Container(
child: Column(
children: [
TextField( //普通的代边框圆角的输入框
decoration: InputDecoration(
hintText: '提示文字',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
),
),
TextField( //多行
maxLines: 4, //4行
decoration: InputDecoration(
hintText: '提示文字',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
),
),
TextField( //密码框
obscureText: true,
decoration: InputDecoration(
hintText: '提示文字',
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 0),//设置文字的微调
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
),
),
TextField( //边框文字
decoration: InputDecoration(
hintText: '提示文字',
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
labelText: '用户名'
),
onChanged: (value) { //输入事件
print(value);
},
),
Checkbox( //单选框
value: this.flag,
onChanged: (value) {
setState(() {
this.flag = value;
});
print(this.flag);
},
),
Row(
children: [ //复选框
Radio(
value: '女',
groupValue: this.sex,
onChanged: (value) {
setState(() {this.sex = value;});
}),
Radio(
value: '男',
groupValue: this.sex,
onChanged: (value) {
setState(() {this.sex = value;});
}),
],
)
],
)
),
);
}
}
-
AlertDialog消息确定框
import 'package:flutter/material.dart';
class AlertDemo extends StatefulWidget {
AlertDemo({Key key}) : super(key: key);
@override
_AlertDemoState createState() => _AlertDemoState();
}
class _AlertDemoState extends State<AlertDemo> {
void _handleAlert () {
showDialog(
context: context,
builder: (context) {
return AlertDialog( //提示框
title: Text('zhuxinxi '),
content: Text('提示信息'),
actions: [ //可以放组件
FlatButton(onPressed: (){print('取消');Navigator.of(context).pop();}, child: Text('取消')),
FlatButton(onPressed: (){print('确定');}, child: Text('确定')),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('alert')),
body: Center(
child: Column(
children: [
RaisedButton(
child: Text('提示信息'),
onPressed: () {
this._handleAlert();
},
),
],
),
),
);
}
}
-
Toast
1,添加依赖
dependencies: fluttertoast: ^3.1.3
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class AlertDemo extends StatefulWidget {
AlertDemo({Key key}) : super(key: key);
@override
_AlertDemoState createState() => _AlertDemoState();
}
class _AlertDemoState extends State<AlertDemo> {
//消息确认框
void _handleAlert () {
showDialog(
context: context,
builder: (context) {
return AlertDialog( //提示框
title: Text('zhuxinxi '),
content: Text('提示信息'),
actions: [ //可以放组件
FlatButton(onPressed: (){print('取消');Navigator.of(context).pop();}, child: Text('取消')),
FlatButton(onPressed: (){print('确定');}, child: Text('确定')),
],
);
},
);
}
//Toast
_showToast() {
Fluttertoast.showToast(
msg: "登录成功",
toastLength: Toast.LENGTH_SHORT, //时间
gravity: ToastGravity.BOTTOM, // 消息框弹出的位置
timeInSecForIos: 1, // 消息框持续的时间（目前的版本只有ios有效）
backgroundColor: Colors.blue,
textColor: Colors.white,
fontSize: 16.0
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('alert')),
body: Center(
child: Column(
children: [
RaisedButton(
child: Text('提示信息'),
onPressed: () {
this._handleAlert();
},
),
RaisedButton( //Toast 按钮
child: Text('toast'),
onPressed: () {
_showToast();
},
),
],
),
),
);
}
}
-
Map 与 JSON 互相转换
Map str = {"name" : 'xin'}; //map. 转json var b = json.encode(str); //json. 转. map Map a = json.decode(b); print(b); print(a); -
http请求 Dio库
自己封装的
Request.dart
//引入网络请求库
import 'package:dio/dio.dart';
// base options
BaseOptions options = new BaseOptions(
baseUrl: "http://www.google.cn",
connectTimeout: 5000,
receiveTimeout: 3000,
);
Dio dio = new Dio(options);
应用
//引入了封装的网络
import '../../network/request.dart';
//发送请求函数
void getHttp() async {
try {
//发送get请求
Response res = await dio.get('/');
print(res);
// post
// response = await dio.post("/test", data: {"id": 12, "name": "wendu"});
} catch (e) {
print(e);
}
}
- 分割线
Divider(
height: 1.0,
indent: 0.0,
color: MyColors.color_gray_150,
),
-
2.1 SimpleDialog
常用参数:
| 属性 | 类型 | 说明 |
|---|---|---|
| title | Widget | Dialog的标题 |
| titlePadding | EdgeInsetsGeometry | title周围的 Padding |
| children | List | child内容数组，会从上到下的排列 child |
| contentPadding | EdgeInsetsGeometry | 内容区域周围的 Padding |
| backgroundColor | Color | Dialog的背景色 |
| elevation | double | Dialog 的悬浮高度，和阴影效果有关 |
| shape | ShapeBorder | Dialog的边框形状 |
例子：
showDialog(
context: context,
builder: (ctx) {
return SimpleDialog(
title: Text("SimpleDialog"),
titlePadding: EdgeInsets.all(10),
backgroundColor: Colors.amber,
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(6))),
children: <Widget>[
ListTile(
title: Center(child: Text("Item_1"),),
),
ListTile(
title: Center(child: Text("Item_1"),),
),
ListTile(
title: Center(child: Text("Item_1"),),
),
ListTile(
title: Center(child: Text("Item_1"),),
),
],
);
});
