Flutter学习记录
2020-04-22 本文已影响0人
哥只是个菜鸟
跳转页面后appbar没有返回箭头
最近自己在练习写Flutter demo，写着写着发现跳转到第二个页面的时候AppBar的没有返回键，后来查阅资料解决了这个问题，如果你跳转的第二个界面最外层是MaterialApp的时候，他就没有了，这个时候你只要把它换成Scaffold就好了。
更新 Widgets
在 iOS 上更新 views，只需要直接改变它们就可以了。在 Flutter 中，widgets 是不可变的，而且不能被直接更新。你需要去操纵 widget 的 state。
这也正是有状态的和无状态的 widget 这一概念的来源。一个 StatelessWidget 正如它听起来一样，是一个没有附加状态的 widget。
StatelessWidget 在你构建初始化后不再进行改变的界面时非常有用。
举个例子，你可能会用一个 UIImageView 来展示你的 logo image 。如果这个 logo 在运行时不会改变，那么你就可以在 Flutter 中使用 StatelessWidget 。
如果你希望在发起 HTTP 请求时，依托接收到的数据动态的改变 UI，请使用 StatefulWidget。当 HTTP 请求结束后，通知 Flutter 框架 widget 的 State 更新了，好让系统来更新 UI。
有状态和无状态的 widget 之间一个非常重要的区别是，StatefulWidget 拥有一个 State 对象来存储它的状态数据，并在 widget 树重建时携带着它，因此状态不会丢失。
小demo
import 'package:flutter/material.dart';
import 'list.dart';
void main(){
runApp(new MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'welcom',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage>{
@override
Widget build(BuildContext context) {
createItem(){
List<String> arr3 = ['hello', 'world', "123", "456"];
for (var i in arr3){
ItemWidget("imageName", "name",onTap: (){},);
}
var map = new Map();
map['name'] = 'zhangsan';
map['age'] = 10;
Map m = new Map();
m['a'] = 'a';
}
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text('首页'),
),
body:new ListView(
children: <Widget>[
// createItem(),
ItemWidget("imageName", "name",onTap: (){
Navigator.push(context, MaterialPageRoute(builder:(context) {
print('d');
return MyList();
}));
},),
ItemWidget("imageName", "name",onTap: (){
},),
ItemWidget("imageName", "name",onTap: (){
},),
],
),
);
}
}
class ItemWidget extends StatelessWidget {
String imageName;
String name;
@required VoidCallback onTap;
ItemWidget(this.imageName, this.name,{this.onTap});
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Container(
height: 50,
child: _mineItem(imageName,name),
),
Container(
color: Color(0xffeaeaea),
constraints: BoxConstraints.expand(height: 1.0),
)
],
),
);
}
Widget _mineItem(String imageName, String name){
return InkWell(
onTap: (){
this.onTap();
},
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child:Container(
padding: EdgeInsets.only(left: 10.0),
child: Image( image :NetworkImage("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"),
),
)
),
Expanded(
flex: 6,
child: Container(
padding: EdgeInsets.only(left: 10.0),
child: Text(name),
)),
Expanded(child: Icon(Icons.keyboard_arrow_right))
],
),
);
}
}
import 'package:flutter/material.dart';
import 'detail.dart';
void main(){
runApp(new MyList());
}
class MyList extends StatelessWidget {
@override
Widget build(BuildContext context) {
List<String> array = ['aaaaa','bbbbb','cccc','vvvv'];
return new Scaffold(
// title: 'welcom',
// home: new Scaffold(
appBar: new AppBar(
title: new Text('5555'),
),
body:new ListView.separated(
itemCount: array.length,
itemBuilder: (BuildContext context, int index){
return new Container(
padding: new EdgeInsets.all(10.0),
child: GestureDetector(
child: new Row (
children: <Widget>[
new Image(image: NetworkImage("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png")
,width: 100.0,height: 100.0,),
new Padding(padding: new EdgeInsets.all(10.0)),
new Expanded(
child: new Column(
children: <Widget>[
new Text(array[index]),
Padding(padding:new EdgeInsets.only(left: 20.0) ),
Text("Hello Containershdjshffhfkfdjkfjdk ",style:TextStyle(fontSize: 15,color: Colors.red),
),
],
),
),
// ],
// ),
],
),
onTap: (){
print('haha');
// setState(() {
Navigator.push(context, MaterialPageRoute(builder:(context) {
print('d');
return MyDetail();
}));
// });
},
),
);
},
separatorBuilder: (BuildContext context, int index){
return new Divider(height: 1.0,);
},
),
);
}
}
listview() {
List<Widget> widget = [];
for (int i = 0; i < 10; i++) {
widget.add(new Center(
child: ListTile(
leading: new Icon(Icons.list),
title: new Text(
'data'),
trailing: new Icon(Icons.keyboard_arrow_up),
),//cell默认属性
));
}
return widget;
}
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:transparent_image/transparent_image.dart';
void main(){
runApp(new MyDetail());
}
class MyDetail extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
// title: 'welcome',
// home: MyHomePage(),
body:MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State{
String textshow = "dhhah";
void _updateText() {//写在其他地方不生效，估计是无状态的控件了
setState(() {
textshow = "哈";
print('rr');
});
}
Widget build(BuildContext context) {
return new Scaffold(
// title: 'welcom',
// home: new Scaffold(
appBar: new AppBar(
title: new Text('5555'),
),
body:
new Container(
padding: new EdgeInsets.all(10.0),
color: Colors.orange,
child: new Column(
children: <Widget>[
new FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: ("https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png"),
height: 200,),
new Container(
color: Colors.red,
padding: new EdgeInsets.all(30.0),
child: Row(
children: <Widget>[
new Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('计开发恢复阶段是符合技术复红红火火恍恍惚惚哈哈哈哈哈哈哈哈哈说的就是电竞盛典就是点击啥都好说',
overflow: TextOverflow.fade,
maxLines: 4,
style: new TextStyle(fontWeight: FontWeight.bold),),
new Text('红红火火恍恍惚惚哈哈哈哈'),
],
)),
new Icon(Icons.star,
color: Colors.blue,),
new Text('😆'),
],
)),
new FlatButton(onPressed: (){
_updateText();//更新weidget
}, child: Text(textshow),color: Colors.red,),
Text(textshow),
],
),
),
);
}
}
