Flutter começar Passo Dois - Gestão Routing
1. Page Ir
2. Routing
3. Nome da rota
4. rotas gancho gerado
Falando de roteamento, quando aprendemos a rede de computadores também aprendeu uma rota, mas essa rota ou-roteamento. Mas só a partir da perspectiva do significado funcional, ambos bastante similar.
Route (Rota) no desenvolvimento móvel geralmente se refere a página (Página), Route significado conceitual com este de uma única página de desenvolvimento de aplicações web é o mesmo, Route no Android geralmente se refere a uma atividade.
gestão de rotas Flutter e nativo para desenvolver semelhante, se é Android ou iOS, gestão de navegação irá manter uma pilha de roteamento, roteamento pilha (push) correspondente à operação para abrir uma nova página, o encaminhamento da pilha (POP) operação correspondente operação de fechamento da página e a principal gestão de rotas é como gerenciar a pilha de roteamento.
.
.
1. uma pequena castanha como o salto página
no desenvolvimento nativo Android, sempre fazemos a página de salto. Agora nós Flutter, mas também aprender sobre como fazer a página de salto.
No caso do nosso balcão, nos deparamos com o seguinte código:
class NewRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("New route"),
),
body: Center(
child: Text("This is new route"),
),
);
}
}
Esta classe herda de StatelessWidget, não há dúvida de que é um widget pai. Somarmos a isso o AppBar, definir o título, no centro das instruções na tela "Esta é nova rota".
Então nós criança Coluna no método _MyHomePageState.build de adicionar um botão widget (FlatButton):
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
... //省略无关代码
//以下代码
FlatButton(
child: Text("open new route"),
textColor: Colors.blue,
onPressed: () {
//导航到新路由
Navigator.push( context,
MaterialPageRoute(builder: (context) {
return NewRoute();
}));
},
),
//以上代码
],
)
E, então, re-calor sync APP, em seguida, clique no botão, ele vai saltar para uma nova página.
Navigator 2.
Navigator é um componente de gerenciamento de rota que fornece um método para a página aberta e rotas de saída. Navigator através de uma pilha para administrar o conjunto rota ativa. Normalmente, a página da tela atual é exibida topo rota da pilha. Navigator oferece uma variedade de métodos para gerenciar a pilha de roteamento, aqui nós só introduzir os dois métodos mais comumente usados:
impulso Future (contexto BuildContext, route Rota)
boleano pop (BuildContext contexto, [resultado])
Uma pequena castanha: Passando parâmetros (roteamento por valor) entre as páginas, criamos uma nova razão para página:
class TipRoute extends StatelessWidget {
TipRoute({
Key key,
@required this.text, // 接收一个text参数
}) : super(key: key);
final String text;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("提示"),
),
body: Padding(
padding: EdgeInsets.all(18),
child: Center(
child: Column(
children: <Widget>[
Text(text),
RaisedButton(
onPressed: () => Navigator.pop(context, "我是返回值"),
child: Text("返回"),
)
],
),
),
),
);
}
}
E depois saltar para o código que está abaixo da nova rota da página;
class RouterTestRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
onPressed: () async {
// 打开`TipRoute`，并等待返回结果
var result = await Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return TipRoute(
// 路由参数
text: "我是提示xxxx",
);
},
),
);
//输出`TipRoute`路由返回结果
print("路由返回值: $result");
},
child: Text("打开提示页"),
),
);
}
}
Nós podemos re-escrever uma entrada, ou você pode fazer alterações diretamente no exemplo acima a página de salto.
3. Nome da rota
chamada "chamado Route" (Nomeado Rota), que é o nome da rota, podemos dar um nome ao percurso, e então você pode abrir uma nova rota direta pelo nome da rota, que traz uma gestão de encaminhamento forma intuitiva e simples.
Vibração encaminhamento estrutura da tabela é tal que:
Map <String, WidgetBuilder> rotas;
O registro é maneira muito simples encaminhamento mesa, vamos voltar para o exemplo, "contra" antes, e em seguida, localize a classe método de construção MyApp MaterialApp, adicionar rotas propriedade, o código é a seguinte:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
//注册路由表
routes:{
"new_page":(context) => NewRoute(),
... // 省略其它路由注册信息
// "/":(context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
} ,
home: MyHomePage(title: 'Flutter Demo Home Page'),//标记主页
);
Agora vamos ter concluído o registo da tabela de roteamento. O código de casa roteamento acima não usar rotas nomeadas, se quisermos ser registrado como uma casa de rota nomeada como fazê-lo? código realmente muito simples, direto "Agora Início roteamento e, em seguida, levante a comentários não marcam esta linha abaixo da home page pode ser comentada.
Então, podemos usar rotas nomeadas para saltar, e saltar directamente quer executar tarefas locais adicionar uma linha de código:
Navigator.pushNamed(context, "new_page");
Pode ser. "NEW_PAGE" Estamos registrados na tabela de roteamento acima mencionado.
No exemplo acima, vimos como passar parâmetros em circunstâncias normais, e agora olhamos para como passar parâmetros ao usar rotas nomeadas:
olhar Primeiro, na página da meta
class EchoRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
//获取路由参数
var args=ModalRoute.of(context).settings.arguments;
//...省略无关代码
print(args);
return Scaffold(
appBar: AppBar(
title: Text("hahah"),
),
body: (
Center(
child: (
Text(args)
),
)
),
);
}
}
Chamamos a rota estamos agora na parte superior do primeiro, e depois chamamos este lugar salto:
Navigator.of(context).pushNamed("new_page",arguments: "hi");
Para que o nosso argumento vai passar.
Suponha que nós também queremos passar acima parâmetros de roteamento TipRoute página encaminhamento registrado para o exemplo da tabela de roteamento, para que ele possa ser aberto pelo nome de roteamento. No entanto, devido à TipRoute aceita um argumento de texto, como é que se encaixam neste caso não muda a fonte TipRoute premissa? É realmente muito simples:
MaterialApp(
... //省略无关代码
routes: {
"tip2": (context){
//将我们本页面的参数放到构造函数中
return TipRoute(text: ModalRoute.of(context).settings.arguments);
},
},
);
4. rotas geradas gancho
Suponha que queremos desenvolver um fornecedor de electricidade APP, quando o usuário não está logado pode ver as informações da loja, mercadoria, etc., mas após a transação, carrinho de compras, precisa estar logado para relógio informações pessoais do usuário e outras páginas. A fim de alcançar as funções acima, precisamos determinar o usuário fizer logon no estado aberto antes do encaminhamento cada página! Se cada aberto rota antes que todos nós precisamos para determinar o que será muito problemático, então qual a melhor maneira de fazer? A resposta é sim!
MaterialApp tem uma propriedade onGenerateRoute, pode ser chamado para abrir uma rota nomeada, disse que pode ser a razão pela qual, é porque quando a chamada Navigator.pushNamed (...) para abrir uma rota nomeada, se o nome da rota especificada já está registrado na tabela de roteamento, ele vai chamar o encaminhamento função de construtor de tabela para gerar componente de roteamento; se a tabela de roteamento não está registado, vai chamar onGenerateRoute para gerar rotas. assinatura callback onGenerateRoute da seguinte forma:
Função Route (configurações RouteSettings)
Com onGenerateRoute callback, para alcançar a função de controle de permissões de página acima é muito fácil: nós damos permissão para usar a tabela de roteamento, substituído por um callback onGenerateRoute, então o callback controle unificado, tais como:
MaterialApp(
... //省略无关代码
onGenerateRoute:(RouteSettings settings){
return MaterialPageRoute(builder: (context){
String routeName = settings.name;
// 如果访问的路由页需要登录，但当前未登录，则直接返回登录页路由，
// 引导用户登录；其它情况则正常打开路由。
}
);
}
);
Note, onGenerateRoute só terão efeito rota nomeada.
