In Android native development, page jumps can be implemented using the Intent class:
Intent intent =new Intent(MainActivity.this,second.class);
startActivity(intent);In Android development, there are many ways to pass values on pages. Common ones can use intents, bundles, custom classes, static variables, etc. to pass values, and even SharedPreferences can be used to save key-value data.
In Flutter, page jumping and passing values also have corresponding methods, but the methods are more in line with the current technical trend standards.
The specific implementation is: final Map<String, WidgetBuilder> routes;
According to Flutter's documentation, routes are inspired by reactjs, and routes can be translated into routes. It can be seen that the idea of routes is borrowed from each other in the current design. The idea of routes is not only popular in the front end, such as in vue, reactjs, and Angular. It is used, and it is also very mature in back-end applications.
One: The code to implement page jumping in flutter:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: '页面跳转',
home: new FirstScreen(),
));
}
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第一个页面'),
backgroundColor: Colors.red,
),
body: new Center(
child: new RaisedButton(
child: new Text('跳转'),
onPressed: () {
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
);
},
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二个页面'),
backgroundColor: Colors.brown,
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('返回'),
),
),
);
}
}
In the above code, you can see
Navigator.push(
context,
new MaterialPageRoute(builder: (context) => new SecondScreen()),
);Specific methods have been implemented in MaterialPageRoute. The Chinese translation of Material here is a material design style, and the Material Design style is designed by Google. It is an interface design standard that provides a consistent and extensive appearance for tablets, mobile phones, and the web. , is currently a very popular UI design standard abroad.
Navigator.push: Navigator is specifically translated as navigation and jump. In order to be simple and easy to understand, I do not use pointers to explain push here. I use another simple method to explain it. In javascript, use the push() method to add one or more elements to the end of the array, which is simple and easy to understand. , is to append a page to display (SecondScreen page).
context: Represents the context, which is similar to the handle in windows, referring to the current page window.
Navigator.pop(context);Navigator.pop(context): pop is used in javascript to delete the last element of the array, which is clear, that is, delete the current page and return to the previous page in the Navigator.
Two: Flutter implements the method of passing values.
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第二个页面'),
backgroundColor: Colors.brown,
),
body: new Center(
child: new RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: new Text('返回'),
),
),
);
}
}
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class Todo {
final String title;
final String description;
Todo(this.title, this.description);
}
void main() {
runApp(new MaterialApp(
title: '传递数据',
home: new TodosScreen(
todos: new List.generate(
20,
(i) => new Todo(
'我是表头 $i 项',
'我是内容 $i',
),
),
),
));
}
class TodosScreen extends StatelessWidget {
final List<Todo> todos;
TodosScreen({Key key, @required this.todos}) : super(key: key);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('第一个页面'),
),
body: new ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return new ListTile(
title: new Text(todos[index].title),
subtitle:new Text(todos[index].description) ,
// When a user taps on the ListTile, navigate to the DetailScreen.
// Notice that we're not only creating a new DetailScreen, we're
// also passing the current todo through to it!
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new DetailScreen(todo: todos[index]),
),
);
},
);
},
),
);
}
}
class DetailScreen extends StatelessWidget {
// Declare a field that holds the Todo
final Todo todo;
// In the constructor, require a Todo
DetailScreen({Key key, @required this.todo}) : super(key: key);
@override
Widget build(BuildContext context) {
// Use the Todo to create our UI
return new Scaffold(
appBar: new AppBar(
title: new Text("${todo.title}"),
),
body: new Padding(
padding: new EdgeInsets.all(16.0),
child: new Text('${todo.description}'),
),
);
}
}
You can see that the value is passed, and the code is quite concise. Compared with the native development of android, the concept of data adapter is less to display the listview control data.
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) => new DetailScreen(todo: todos[index]),
),
);onTap represents a finger tap event on the screen.
This is done by passing values with classes.
DetailScreen({Key key, @required this.todo}) : super(key: key);It can be seen that through the initialization of the class, the class is passed in, and then the relevant properties of the class are read to achieve the value transfer.
Due to space limitations, there is no code here, and flutter value transfer can also be implemented through various methods such as static variables of the class.
Three: At present, the more popular page value transfer abroad is to use third-party plug-ins such as fluro.
import 'package:flutter/material.dart';
import 'app_route.dart';
import 'package:fluro/fluro.dart';
void main() {
router.define('home/:data', handler: new Handler(
handlerFunc: (BuildContext context, Map<String, dynamic> params) {
return new Home(params['data'][0]);
}));
runApp(new Login());
}
class Login extends StatefulWidget{
@override
createState() => new LoginState();
}
class LoginState extends State<Login>{
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Fluro 例子',
home: new Scaffold(
appBar: new AppBar(
title: new Text("登录"),
),
body: new Builder(builder: (BuildContext context) {
return new Center(child:
new Container(
height: 30.0,
color: Colors.blue,
child:new FlatButton(
child: const Text('传递帐号密码'),
onPressed: () {
var bodyJson = '{"user":1281,"pass":3041}';
router.navigateTo(context, '/home/$bodyJson');
// Perform some action
},
)),
);
}),
/**/
));
}
}
class Home extends StatefulWidget{
final String _result;
Home(this._result);
@override
createState() => new HomeState();
}
class HomeState extends State<Home>{
@override
Widget build(BuildContext context) {
return new Center(
child: new Scaffold(
appBar: new AppBar(
title: new Text("个人主页"),
),
body:new Center(child: new Text(widget._result)),
)
);
}
}Code for 'app_route.dart':
import 'package:fluro/fluro.dart';
Router router = new Router();
It can be seen that fluro applies a relatively trendy method to pass values, which is closer to the way of passing values such as vue, ag, and reactjs.
var bodyJson = '{"user":1281,"pass":3041}';
router.navigateTo(context, '/home/$bodyJson');In this way, a lot of code is written less, and in large-scale APP development, it is more clean, easy to understand, easy to manage, and code unified.
To sum up the above, flutter is a rising star, and its design is relatively bold, and at the same time draws on some trendy design ideas.
In android UI development, the way of xml layout is relatively backward, but it is limited by the age. It was designed 10 years ago. At that time, the way of XML design was relatively easy to accept, but the times were changing and the technology was updating.