细节1：Colum如何嵌套listview(可以滑动的)
Column(
...
children: [
Expanded(
child: Container(
...
child: ListView(
padding: EdgeInsets.all(0),
shrinkWrap: true,
physics: ClampingScrollPhysics(),
children: [
buildListItem(context,2, '', '', '', '', ''),
],
),
),
)
]
)
细节2：手写最多9个GridView（图片列表3*3）（因为官方demo的不能运行，网上找到有一个但是一嵌套到其它布局里面就没有用了）
List list = List(); //在class的最外层创建一个list用于存放数据
//初始化
@override
Widget build(BuildContext context) {
list.add('https://reviveimg.hellorf.com/www/images/64c64df42c2258517a6603b3ba364343.jpg');
list.add('https://reviveimg.hellorf.com/www/images/64c64df42c2258517a6603b3ba364343.jpg');
list.add('https://reviveimg.hellorf.com/www/images/64c64df42c2258517a6603b3ba364343.jpg');
list.add('https://reviveimg.hellorf.com/www/images/64c64df42c2258517a6603b3ba364343.jpg');
list.add('https://reviveimg.hellorf.com/www/images/64c64df42c2258517a6603b3ba364343.jpg');
}
//函数
Widget buildGridView(){
int length = list.asMap().values.length;
return Container(
padding: EdgeInsets.only(left: 12,right: 12,top: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Row(
children: [
getItemImage(length, 0),
getItemImage(length, 1),
getItemImage(length, 2),
],
),
Row(
children: [
getItemImage(length, 3),
getItemImage(length, 4),
getItemImage(length, 5),
],
),
Row(
children: [
getItemImage(length, 6),
getItemImage(length, 7),
getItemImage(length, 8),
],
)
],
),
);
}
Widget getItemImage(int size ,int index){
if(size > index){
return Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.all(4),
child: Image.network(list.elementAt(index)),
),
);
}else{
return Expanded(
flex: 1,
child: Image.asset('art/tran.png',width: 1,height: 1,), //一个透明的图片高度和宽度随便
);
}
}
tran.png
单击事件：GestureDetector和Listener
Listener(
onPointerUp: (e){
//点击动作
print('测试');
},
child: buildItem(1,'测试',2),
),
GestureDetector(
onTap: (){
print('测试测试');
},
child: buildItem1('测试'),
),
常量类编写：
class TestColor{
static const shen = Color.fromARGB(255, 238, 133, 51);
static const qian = Color.fromARGB(255, 236, 181, 65);
static const gray = Color(0xFFEEEEEE);
}
自定义标题类的封装
//透明的titlebar
class TranTitle extends StatefulWidget{
String title = "";
TranTitle(this.title);
@override
State createState() {
// TODO: implement createState
return TranTitleState(title);
}
}
class TranTitleState extends State{
String title = "";
TranTitleState(this.title);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
height: 50,
color: Colors.transparent, // 背景颜色
// decoration: BoxDecoration( //背景渐变色
// gradient: LinearGradient(colors: [
// Color.fromARGB(255, 138, 133, 81),
// Color.fromARGB(255, 136, 141, 65),
// ])
// ),
child: Stack(
children: [
Container(
padding: EdgeInsets.only(left: 10),
alignment: Alignment.centerLeft,
child: GestureDetector(
onTap: (){
print('返回上一页');
Navigator.pop(context); //返回
},
child: Image.asset('art/titlebar_back_white.png',height: 18,width: 18,),
),
),
Center(
child: Text(title,style: TextStyle(fontSize: 16,color: Colors.white),), //字体颜色和大小
),
],
),
);
}
}
titlebar_back_white.png
//在别的页面
TranTitle('title'),
渐变背景色圆角按钮：
new Container(padding: EdgeInsets.only(top: 2),
margin: EdgeInsets.only(left: 20,right: 20), //按钮的左右margin（按钮太宽可以调整）
child: new FlatButton(
child: new Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), //圆角大小,与BoxDecoration保持一致，更美观
gradient: LinearGradient(colors: [
Color.fromARGB(255, 38, 13, 51),
Color.fromARGB(255, 26, 11, 65),
]),
),
child: new Text("测试",style: new TextStyle(fontSize: 14,fontWeight: FontWeight.w300),),
padding: EdgeInsets.fromLTRB(10, 3, 10, 3), //按钮的上下padding（按钮太偏可以调整）
alignment: Alignment.center,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)), //圆角大小,与BoxDecoration保持一致，更美观
onPressed: () {//单击事件
Navigator.push(context, MaterialPageRoute(builder: context) => TaskDetailPage()); //跳转页面
},
textColor: Colors.white,
),
),
带边框和背景颜色按钮：
FlatButton(
textColor: Colors.white, //背景颜色
onPressed: (){ //点击事件
print('点击事件');
},
child: Center(
child: Container(
width: 80, //按钮的宽
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), //圆角
border: Border.all(color: Colors.amber, width: 1), //边框颜色
),
alignment: Alignment.center,
padding: EdgeInsets.only(top: 2,bottom: 2),
child: Text('测试',style: TextStyle(color: Colors.amber),), //字体颜色
),
),
),
横向ListView
scrollDirection: Axis.horizontal, //ListView设置
错误1：
[VERBOSE-2:ui_dart_state.cc(148)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 110 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.
在报 空值错误 的时候，不一定是你加的值是空的 有可能是你使用的对象没有声明
跳转页面顺便关掉当前页面
Navigator.pushReplacement( context, MaterialPageRoute(builder: (BuildContext context) => MainPage()));
double保留后2位小数
double vv = 12.3333333;
vv.toStringAsFixed(2);
Flutter打包IPA报错Could not find an option named "track-widget-creation".
1、进入项目目录
2、flutter build ios --release
软键盘顶起布局
Scaffold(
resizeToAvoidBottomPadding: false,
)
点击空白处关闭软键盘
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
// 触摸收起键盘
FocusScope.of(context).requestFocus(FocusNode());
},
child: 布局
}
ios报错：ld: framework not found Pods_Runner
1.项目蓝色图标－>Targets->General->Linked Frameworks and Libraries
2.删除 Pods_Alamofire___.framework
flutter打包IOS应用前命令
xcode报错
1、Could not find an option named "track-widget-creation".
2、flutter -h....什么的忘记了
flutter build ios --release
Android Studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
✗ Android Studio not found at /path/to/android/studio/Contents
flutter config --android-studio-dir=""
flutter config --android-sdk=""