Flutter学习笔记
Flutter学习笔记
- Flutter基础教程
- Flutter命令
- Flutter组件
-
- Align对齐组件
- AppBar组件
- BottomAppBar
- ButtonBar
- FlexibleSpaceBar
- SliverAppBar
- SnackBar
- TabBar
- BottomNavigationBar 底部导航栏
- ConstrainedBox
- DecoratedBox组件
- FittedBox 填充容器
- OverflowBox溢出容器
- RotatedBox旋转容器
- SizedBox 指定宽高
- DropdownButton 下拉框
- FlatButton扁平按钮
- FloatingActionButton
- IconButton 图标按钮
- OutlineButton边框按钮
- RaisedButton凸起按钮
- RawMaterialButton
- Card 卡片
- Checkbox 复选框
- CheckboxListTitle组件
- Clip标签组件
- Dialog组件
- Expanded填充
- Flexible填充可能的空间
- GridTile 网格标题
- 简单案例
-
- ListView使用
Flutter基础教程
学习教程目前是参考Dart语言教程，学习Dart基本语法，然后参考Flutter中文网，根据文档一步步，从搭建环境到写出第一个Flutter Demo，到这里对Flutter基本有了一个了解，但是widget组件用的不多，还需要学习其他的组件。
由于刚接触，没有经验，从腾讯课堂找了些免费的Flutter视频教程。亢少军的教程，《Flutter开发之组件大全（学习版）》和《Flutter女装商城实战（学习版）》。
Flutter命令
- SDK升级
flutter upgrade - 安装包
flutter pub get 或 flutter packages get - 编译apk
flutter build apk 默认打包所有so
flutter build apk --target-platform android-arm
flutter build apk --target-platform android-arm,android-arm64
flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi分别打包
android-arm对应armeabi-v7a
android-arm64对应arm64-v8a
android-x64对应x86_64
flutter run 安装包含所有so的apk
flutter run --release
Flutter组件
Align对齐组件
// Align定义
const Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
})
// 使用方法
Scaffold(
appBar: AppBar(
title: Text('Flutter组件'),
),
body: Container(
color: Colors.red,
child: Align(
//对齐方式
//alignment: Alignment.centerLeft,
// 对齐方式使用x,y来表示，范围是-1.0到1.0
alignment: Alignment(-1.0, 1.0),
//父容器未指定宽高时，widthFactor设置父容器是子容器的大小的几倍
widthFactor: 2.0,
heightFactor: 2.0,
child: Container(
width: 100,
height: 50,
color: Colors.blue,
child: Text(
'Align组件',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
),
),
);
AppBar组件
AppBar(
backgroundColor: Colors.blue,
//背景颜色
leading: Icon(Icons.home),
//左侧图标
centerTitle: true,
//居中标题
title: Text('产品'),
actions: <Widget>[
IconButton(
tooltip: '搜索',
icon: Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {
print('点击事件');
},
),
//右侧菜单按钮
PopupMenuButton<String>(
itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
//菜单项
PopupMenuItem<String>(
value: 'friend',
child: Text('分享到朋友圈'),
),
PopupMenuItem<String>(
value: 'download',
child: Text('下载到本地'),
),
],
),
],
)
BottomAppBar
底部应用栏
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: null,
child: Icon(Icons.add),
),
bottomNavigationBar: BottomAppBar(
notchMargin: 10.0,
color: Colors.green,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {
},
),
],
),
),
);
ButtonBar
dialog 确定、取消
Center(
//末端按钮对齐的容器
child: ButtonBar(
//对齐方式 默认为末端end
alignment: MainAxisAlignment.center,
//child大小
mainAxisSize: MainAxisSize.min,
children: <Widget>[
RaisedButton(
child: Text('按钮1'),
color: Colors.blue,
onPressed: () {
},
),
RaisedButton(
child: Text('按钮2'),
color: Colors.blue,
onPressed: () {
},
),
RaisedButton(
child: Text('按钮3'),
color: Colors.blue,
onPressed: () {
},
),
],
),
);
FlexibleSpaceBar
Scaffold(
appBar: AppBar(
title: Text('FlexibleSpaceBar组件'),
),
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
//展开的高度
expandedHeight: 200.0,
//是否试着滑动隐藏标题
floating: false,
pinned: true, //是否固定在顶部
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text(
'可折叠的组件',
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
background: Image.network(
'https://p5.ssl.qhimgs1.com/sdr/400__/t01b5f712283bab79f5.jpg',
fit: BoxFit.cover,
),
),
),
];
},
body: Center(
child: Text('向上提拉，查看效果'),
)),
);
SliverAppBar
SnackBar
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('SnackBar组件'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
onTap: () {
final snackBar = SnackBar(
content: Text('这是一个SnackBar'),
backgroundColor: Colors.green,
action: SnackBarAction(label: '撤销', onPressed: () {
}),
duration: Duration(milliseconds: 3000),
);
Scaffold.of(context).showSnackBar(snackBar);
},
child: Text('显示屏幕底部消息'),
),
);
}
}
TabBar
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(title: 'Flutter 组件', home: DemoPage());
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage>
with SingleTickerProviderStateMixin {
ScrollController _scrollViewController;
TabController _tabController;
@override
void initState() {
super.initState();
_scrollViewController = ScrollController();
_tabController = TabController(length: 6, vsync: this);
}
@override
void dispose() {
_scrollViewController.dispose();
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 500.0,
child: Scaffold(
appBar: AppBar(
title: Text('text'),
leading: Icon(Icons.home),
backgroundColor: Colors.green,
bottom: TabBar(
isScrollable: true,
controller: _tabController,
tabs: <Widget>[
//图标可去掉
Tab(text: '科技', icon: Icon(Icons.message)),
Tab(text: '房产', icon: Icon(Icons.menu)),
Tab(text: '娱乐', icon: Icon(Icons.add)),
Tab(text: '体育', icon: Icon(Icons.print)),
Tab(text: '电影', icon: Icon(Icons.favorite)),
Tab(text: '教育', icon: Icon(Icons.category)),
],
),
),
body: TabBarView(
controller: _tabController,
children: <Widget>[
Text('选项卡 1'),
Text('选项卡 2'),
Text('选项卡 3'),
Text('选项卡 4'),
Text('选项卡 5'),
Text('选项卡 6'),
],
),
),
);
}
}
BottomNavigationBar 底部导航栏
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('底部导航栏'),
),
body: Container(
child: Center(
child: Text('123'),
),
),
bottomNavigationBar: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
int _currentIndex = 0;
void _onItemTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
//底部按钮类型，fixed内容固定 ， 移位样式shifting
type: BottomNavigationBarType.fixed,
iconSize: 24.0,
onTap: _onItemTapped,
//当前选中项索引，高亮显示
currentIndex: _currentIndex,
//当类型为fixed时，选中项的颜色
fixedColor: Colors.red,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('首页'),
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
title: Text('消息'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('我的'),
),
]);
}
}
ConstrainedBox
限定控件大小
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('BottomNavigationBar底部导航栏'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
int _currentIndex = 0;
void _onItemTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Container(
width: 200,
height: 60,
child: Text(
'宽度200，高度60',
style: TextStyle(color: Colors.white),
),
color: Colors.green,
),
SizedBox(
height: 10,
),
ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 100.0,
minHeight: 20.0,
maxHeight: 60.0,
maxWidth: 200.0,
),
child: Container(
width: 90,
height: 10,
child: Text(
'宽度300，高度60',
style: TextStyle(color: Colors.white),
),
color: Colors.green,
),
),
],
),
);
}
}
DecoratedBox组件
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('DecoratedBox组件'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width: 200,
height: 200,
child: DecoratedBox(
//装饰定位，background：背景 foreground:前景
position: DecorationPosition.background,
decoration: BoxDecoration(
color: Colors.grey,
//设置背景图片
image: DecorationImage(
image: ExactAssetImage('images/site.jpg'),
//图片填充方式
fit: BoxFit.cover,
),
//边框弧度，用来做圆角或圆形图片
// borderRadius: BorderRadius.circular(100.0),
//边框
border: Border.all(
//边框颜色
color: Colors.black,
//边框粗细
width: 2.0,
),
//边框类型 矩形或圆形
shape: BoxShape.circle,
),
child: Text(
'定位演示',
style: TextStyle(color: Colors.blue, fontSize: 25.0),
),
),
),
);
}
}
FittedBox 填充容器
BoxFit.fitWidth,
BoxFit.contain,
BoxFit.cover
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('DecoratedBox填充组件'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.red,
width: 100,
height: 100,
child: FittedBox(
//填充模式
fit: BoxFit.fitWidth,
alignment: Alignment.center,
child: Container(
color: Colors.blue,
child: Text(
'BoxFit.cover',
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
),
),
);
}
}
OverflowBox溢出容器
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter 组件',
home: Scaffold(
appBar: AppBar(
title: Text('OverflowBox溢出容器'),
),
body: DemoPage(),
),
);
}
}
class DemoPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return DemoPageState();
}
}
class DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
width: 200,
height: 200,
padding: EdgeInsets.all(6.0),
child: OverflowBox(
//
maxWidth: 300.0,
maxHeight: 500.0,
alignment: Alignment.topLeft,
child: Container(
width: 300.0,
height: 300.0,
color: Colors.grey,
),
),
);
}
}
RotatedBox旋转容器
Container(
color: Colors.red,
width: 200,
height: 200,
padding: EdgeInsets.all(6.0),
child: RotatedBox(
//
child: Text('1'),
//旋转次数，1次旋转一圈的1/4
quarterTurns: 1,
),
)
SizedBox 指定宽高
指定宽高容器 child不允许超出指定大小的范围
Center(
//指定宽高容器 child不允许超出指定大小的范围
child: SizedBox(
width: 100.0,
height: 100.0,
child: Image.asset('images/site.jpg',fit: BoxFit.cover,),
),
)
DropdownButton 下拉框
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: DropdownButton(
//提示文本
hint: Text('请选择城市'),
value: selectedValue,
//下拉列表项数据
items: getList(),
//图标大小
iconSize: 48.0,
//设置阴影高度
elevation: 24,
//下拉文本样式
style: TextStyle(color: Colors.blue),
//改变事件
onChanged: (T) {
setState(() {
selectedValue = T;
});
// selectedValue = T;
},
//将下拉框设置成和父容器宽度一样
isExpanded: true,
), // This trailing comma makes auto-formatting nicer for build methods.
)
FlatButton扁平按钮
Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: FlatButton(
child: Text(
'FlatButton按钮',
style: TextStyle(fontSize: 20),
),
//内边距
padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 15.0),
//按钮背景色
color: Colors.green,
//文本颜色
textColor: Colors.white,
//按钮主题
textTheme: ButtonTextTheme.normal,
//墨汁飞溅的颜色
splashColor: Colors.blue,
//抗锯齿能力
clipBehavior: Clip.antiAlias,
//形状
shape: RoundedRectangleBorder(
//边框样式
side: BorderSide(
width: 2.0,
color: Colors.blue,
style: BorderStyle.solid,
),
// 边框角度弧度
borderRadius: BorderRadius.all(Radius.circular(20.0)),
),
onPressed: () {
print('按钮按下');
},
),
),
);
FloatingActionButton
Center(
child: Column(
children: <Widget>[
SizedBox(height: 20.0),
FloatingActionButton(
backgroundColor: Colors.green,
child: Icon(Icons.add),
onPressed: () {
},
),
SizedBox(height: 20.0),
FloatingActionButton(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
child: Icon(Icons.add),
onPressed: () {
},
tooltip: '提示信息',
heroTag: null,
elevation: 8.0,
highlightElevation: 16.0,
//大小
mini: true,
),
SizedBox(height: 20.0),
FloatingActionButton(
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
child: Icon(Icons.add),
onPressed: () {
},
tooltip: '提示信息',
heroTag: null,
elevation: 8.0,
highlightElevation: 16.0,
//大小
mini: true,
shape: Border.all(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid,
),
),
SizedBox(height: 20.0),
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
},
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.white,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.only(
topLeft: Radius.circular(12.0),
topRight: Radius.circular(22.0),
bottomLeft: Radius.circular(33.0),
bottomRight: Radius.circular(2.0),
)),
),
],
),
),
IconButton 图标按钮
IconButton(
alignment: Alignment.center,
icon: Icon(Icons.add),
onPressed: (){
},
color: Colors.blue,
iconSize: 40,
//墨汁飞溅效果
splashColor: Colors.green,
)
OutlineButton边框按钮
Center(
child: Column(
children: <Widget>[
OutlineButton(
onPressed: (){
},
child: Text('OutlineButton按钮'),
),
SizedBox(height: 20.0),
OutlineButton(
onPressed: (){
},
child: Text('OutlineButton按钮'),
color: Colors.green,
borderSide: BorderSide(
color: Colors.blue,
),
),
SizedBox(height: 20.0),
OutlineButton.icon(
icon: Icon(Icons.menu),
label: Text('OutlineButton图标'),
onPressed: (){
},
color: Colors.green,
borderSide: BorderSide(
color: Colors.blue,
),
),
],
),
)
RaisedButton凸起按钮
Center(
child: Column(
children: <Widget>[
RaisedButton(
onPressed: () {
},
child: Text('RaisedButton'),
),
SizedBox(height: 20.0),
RaisedButton(
onPressed: () {
},
child: Text('RaisedButton'),
color: Colors.green,
textColor: Colors.white,
padding: EdgeInsets.all(15.0),
),
SizedBox(height: 20.0),
RaisedButton.icon(
icon: Icon(Icons.menu),
label: Text('RaisedButton图标'),
onPressed: () {
},
color: Colors.green,
textColor: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.black,
),
borderRadius:
BorderRadius.only(topRight: Radius.circular(20.0)),
),
),
],
),
),
RawMaterialButton
原始组件，自定义按钮时用到
Center(
child: Column(
children: <Widget>[
RawMaterialButton(
onPressed: () {
},
child: Text('RaisedButton'),
),
SizedBox(height: 20.0),
RawMaterialButton(
onPressed: () {
},
textStyle: TextStyle(color: Colors.green,fontSize: 20),
child: Text('RaisedButton'),
padding: EdgeInsets.all(15.0),
//高亮时背景色
highlightColor: Colors.blue,
//墨汁飞溅
splashColor: Colors.red,
//抗锯齿
clipBehavior: Clip.antiAlias,
//高亮阴影
highlightElevation: 10.0,
shape: RoundedRectangleBorder(
side: BorderSide(
width: 2.0,
color: Colors.black,
),
borderRadius:
BorderRadius.only(topRight: Radius.circular(20.0)),
),
),
],
),
),
Card 卡片
Card(
color: Colors.green,
//卡片的阴影
elevation: 15.0,
margin: EdgeInsets.all(10.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const ListTile(
leading: Icon(
Icons.shopping_cart,
color: Colors.white,
),
title: Text(
'购物车',
style: TextStyle(color: Colors.white, fontSize: 20),
),
subtitle: Text('subtitle子标题',
style: TextStyle(color: Colors.white, fontSize: 15)),
),
ButtonTheme(
child: ButtonBar(
children: <Widget>[
FlatButton(
child: Text(
'购买',
style: TextStyle(color: Colors.black, fontSize: 14.0),
),
onPressed: () {
},
),
FlatButton(
child: Text(
'取消',
style: TextStyle(color: Colors.black, fontSize: 14.0),
),
onPressed: () {
},
),
],
),
)
],
),
),
Checkbox 复选框
Checkbox(
//激活时的颜色
activeColor: Colors.green,
//是否被选中
value: isChecked,
//改变时的状态
onChanged: (bool b) {
setState(() {
isChecked = b;
});
},
),
CheckboxListTitle组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'CheckboxListTile组件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _value = false;
List<bool> isChecks = [false, false];
void _valueChanged(bool value) {
for (var i = 0; i < isChecks.length; i++) {
isChecks[i] = value;
}
setState(() {
_value = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Center(
child: CheckboxListTile(
//默认文字是否高亮
selected: true,
//是否被选中
value: _value,
//改变时的状态
onChanged: _valueChanged,
//文字是否对齐 图标高度
dense: false,
isThreeLine: false,
//文字是否三行显示
title: Text('整个内容'),
//将控件放置于何处，相对于文本， leading:文本前边，platform,trailing：文本后边
controlAffinity: ListTileControlAffinity.platform,
subtitle: Text('勾选下列选项'),
//左侧图标
secondary: Icon(Icons.shopping_cart),
activeColor: _value ? Colors.red : Colors.green,
),
),
Center(
child: CheckboxListTile(
//是否被选中
value: isChecks[0],
//改变时的状态
onChanged: (bool) {
setState(() {
isChecks[0] = bool;
});
},
title: Text('选项1'),
activeColor: _value ? Colors.red : Colors.green,
),
),
Center(
child: CheckboxListTile(
//是否被选中
value: isChecks[1],
//改变时的状态
onChanged: (bool) {
setState(() {
isChecks[1] = bool;
});
},
title: Text('选项2'),
activeColor: _value ? Colors.red : Colors.green,
),
),
],
),
);
}
}
Clip标签组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Chip组件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<String> _tags = ['Android', 'IOS', 'Windos', 'MacOs', 'Linux'];
String _action = 'Android';
List<String> _selected = [];
String _choice = '';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: <Widget>[
Chip(
label: Text('Chip'),
),
Chip(
label: Text('Chip',
style: TextStyle(color: Colors.white, fontSize: 15.0)),
backgroundColor: Colors.green,
),
Chip(
label: Text('Chip',
style: TextStyle(color: Colors.white, fontSize: 15.0)),
backgroundColor: Colors.green,
avatar: CircleAvatar(
backgroundColor: Colors.orange,
child: Text('C'),
),
),
Chip(
label: Text('Chip',
style: TextStyle(color: Colors.white, fontSize: 15.0)),
backgroundColor: Colors.green,
avatar: CircleAvatar(
backgroundImage: NetworkImage(
'http://pic.iask.cn/fimg/77557103129_516.jpg'),
),
),
Chip(
label: Text('Chip'),
onDeleted: () {
},
deleteIcon: Icon(Icons.delete),
deleteIconColor: Colors.red,
deleteButtonTooltipMessage: '删除整个标签',
),
//分割线
Divider(height: 8.0),
//可删除的标签
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: _tags.map((tag) {
return Chip(
label: Text(tag),
onDeleted: () {
setState(() {
_tags.remove(tag);
});
},
);
}).toList(),
),
Divider(height: 8.0),
//动作Chip
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: _tags.map((tag) {
return ActionChip(
label: Text(tag),
onPressed: () {
setState(() {
_action = tag;
print(_action);
});
},
);
}).toList(),
),
Divider(height: 8.0),
Container(
width: 400,
child: Text('${_selected}'),
),
//过滤Chip
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: _tags.map((tag) {
return FilterChip(
label: Text(tag),
selected: _selected.contains(tag),
onSelected: (value) {
setState(() {
if (_selected.contains(tag)) {
_selected.remove(tag);
} else {
_selected.add(tag);
}
_action = tag;
print(_action);
});
},
);
}).toList(),
),
Divider(height: 8.0),
Container(
width: 400,
child: Text('${_choice}'),
),
//选择Chip
Wrap(
spacing: 8.0,
runSpacing: 8.0,
children: _tags.map((tag) {
return ChoiceChip(
label: Text(tag),
selected: _choice == tag,
selectedColor: Colors.black,
onSelected: (value) {
setState(() {
_choice = tag;
});
},
);
}).toList(),
),
],
),
],
),
);
}
}
Dialog组件
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Dialog组件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
///打开dialog
void _showDialog(BuildContext context) {
showDialog(
context: context,
builder: (_) => Dialog(
child: Container(
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Text('这是一个Dialog'),
RaisedButton(
child: Text('取消'),
onPressed: () {
},
),
],
),
),
));
}
/// 打开AboutDialog
void _showAboutDialog(BuildContext context) {
//调用方法
showDialog(
context: context,
//构造器
builder: (_) => AboutDialog(
applicationName: 'Android Studio',
applicationIcon: Icon(Icons.apps),
applicationVersion: 'V1.0',
children: <Widget>[
Text('这是一个AboutDialog'),
],
));
}
/// 打开SimpleDialog
void _showSimpleDialog(BuildContext context) {
//调用方法
showDialog(
context: context,
//构造器
builder: (_) => SimpleDialog(
title: Text('选择（SimpleDialog）'),
children: <Widget>[
SimpleDialogOption(
child: Text('选项1'),
onPressed: (){
},
),
SimpleDialogOption(
child: Text('选项2'),
onPressed: (){
},
),
],
));
}
/// 打开AlertDialog
void _showAlertDialog(BuildContext context) {
//调用方法
showDialog(
context: context,
//构造器
builder: (_) => AlertDialog(
title: Text('这是一个AlertDialog'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('ssss'),
Text('ssss'),
Text('ssss'),
Text('ssss'),
],
),
),
actions: <Widget>[
FlatButton(
child: Text('确定'),
onPressed: (){
},
),
FlatButton(
child: Text('取消'),
onPressed: (){
},
),
],
));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: <Widget>[
Center(
child: RaisedButton(
child: Text('打开dialog'),
onPressed: () {
_showDialog(context);
},
),
),
Center(
child: RaisedButton(
child: Text('打开AboutDialog'),
onPressed: () {
_showAboutDialog(context);
},
),
),
Center(
child: RaisedButton(
child: Text('打开SimpleDialog'),
onPressed: () {
_showSimpleDialog(context);
},
),
),
Center(
child: RaisedButton(
child: Text('打开AlertDialog'),
onPressed: () {
_showAlertDialog(context);
},
),
),
],
),
);
}
}
Expanded填充
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Expanded组件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
children: <Widget>[
RaisedButton(
color: Colors.orange,
child: Text('橙色按钮'),
onPressed: () {
},
),
//填充剩余所有空间
Expanded(
flex: 1,
child: RaisedButton(
color: Colors.green,
child: Text('绿色按钮'),
onPressed: () {
},
),
),
RaisedButton(
color: Colors.orange,
child: Text('橙色按钮'),
onPressed: () {
},
),
],
),
);
}
}
Flexible填充可能的空间
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flexible组件'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
children: <Widget>[
RaisedButton(
color: Colors.orange,
child: Text('橙色按钮'),
onPressed: () {
},
),
//填充可能的空间
Flexible(
flex: 1,
child: RaisedButton(
color: Colors.green,
child: Text('绿色按钮'),
onPressed: () {
},
),
),
RaisedButton(
color: Colors.orange,
child: Text('橙色按钮'),
onPressed: () {
},
),
],
),
);
}
}
GridTile 网格标题
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'GridTile 网格标题'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
color: Colors.grey,
child: GridView.count(
//列数
crossAxisCount: 2,
//水平间距
crossAxisSpacing: 4.0,
//垂直间距
mainAxisSpacing: 10.0,
padding: EdgeInsets.all(4.0),
children: <Widget>[
GridTile(
header: Text(
'GridTile header',
style: TextStyle(color: Colors.black),
),
child: Image.network(
'https://p1.ssl.qhimgs1.com/sdr/400__/t014e59369c66aba357.jpg',
fit: BoxFit.cover,
),
footer: Text(
'GridTile footer',
style: TextStyle(color: Colors.black),
),
),
GridTile(
header: GridTileBar(
title: Text('GridTile header'),
),
child: Image.network(
'http://img.zcool.cn/community/[email protected]',
fit: BoxFit.cover,
),
footer: GridTileBar(
title: Text('GridTile footer'),
leading: Icon(
Icons.favorite,
color: Colors.green,
),
),
),
Image.network(
'http://img.zcool.cn/community/[email protected]',
fit: BoxFit.cover),
//添加网格效果
GridPaper(
//网格颜色
color: Colors.red,
child: Image.network(
'http://img.zcool.cn/community/[email protected]',
fit: BoxFit.cover),
),
],
),
),
),
);
}
}
简单案例
ListView使用
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter List View组件应用'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({
Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return _item(context, index);
},
itemCount: 10,
),
),
);
}
Widget _item(BuildContext context, int index) {
return Container(
margin: EdgeInsets.only(top: 6.0),
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
// 下边框
decoration: BoxDecoration(
border:
Border(bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 100,
height: 100,
margin: EdgeInsets.only(right: 10),
child: Image.network(
'http://img.zcool.cn/community/[email protected]',
fit: BoxFit.cover,
),
),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'小强程序设计',
style: TextStyle(
fontSize: 16.0,
color: Color(0xFF181818),
fontWeight: FontWeight.bold),
),
Wrap(
spacing: 5.0,
children: <Widget>[
Text('Android | Java | Flutter',
style: TextStyle(
fontSize: 14.0, color: Color(0xFF655555))),
],
),
Container(
margin: EdgeInsets.fromLTRB(0, 5, 0, 5),
child: Text(
'《计算机应用与软件》创刊于1984年，由上海市计算技术研究所和上海计算机软件技术开发中心共同主办，是全国中文核心期刊、中国计算机学会会刊，并已纳入《中国科技期刊统计源期刊（中国科技核心期刊）》、《中国学术期刊综合评价数据库来源期刊》、《万方数据—数字化期刊群全文收录期刊》、《中文科技期刊数据库（全文版）收录期刊》、《中国科学引文数据库（CSCD）来源期刊》、美国《剑桥科学文摘》收录期刊、美国《乌利希国际期刊指南》等数据库收录。',
style: TextStyle(fontSize: 12.0, color: Color(0xFFA5A5A5)),
maxLines: 3,
overflow: TextOverflow.ellipsis,
),
),
Row(
children: <Widget>[
Expanded(
child: Text('代写程序',
style: TextStyle(
color: Color(0xff6A5C5B), fontSize: 13)),
),
Text('20',
style: TextStyle(color: Colors.red, fontSize: 25)),
Text(
' 元/起',
style:
TextStyle(color: Color(0xff6A5C5B), fontSize: 14.0),
),
],
),
],
),
),
],
),
);
}
}