Flutter路由导航(2):使用路由页面进行跳转

 


一、程序入口

main.dart

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';
import 'widgets/routes.dart'; // 添加路由页面

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 标题
      debugShowCheckedModeBanner: false, // 不显示debug标识
      theme: ThemeData(
        // 主题
        primarySwatch: Colors.blue,
      ),
      routes: routes, // 指定路由页面
      initialRoute: 'home', // 指定路由导航的首页名称
    );
  }
}

二、路由页面创建

在 lib 目录下创建 widgets 目录,然后在 widgets 目录下创建 routes.dart 文件。

routes.dart

import 'package:flutter/material.dart';
import 'home.dart';
import 'textDemo.dart';
import 'listViewDemo.dart';

// 路由导航页面
Map<String, WidgetBuilder> routes = {
  'home': (context) => const Home(),
  'textDemo': (context) => const TextDemo(),
  'listViewDemo': (context) => const ListViewDemo(),
};

三、主页面创建

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: MyHomeBody(),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  const MyHomeBody({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Expanded(
          flex: 1,
          child: Container(color: Colors.transparent, width: 200),
        ),
        // 按钮1
        SizedBox(
          height: 80,
          width: 200,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, 'textDemo'); // 路由跳转到textDemo页面
            },
            child: const Text("textDemo"),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(color: Colors.transparent, width: 200),
        ),
        // 按钮2
        SizedBox(
          height: 80,
          width: 200,
          child: ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(
                  context, 'listViewDemo'); // 路由跳转到listViewDemo页面
            },
            child: const Text("listViewDemo"),
          ),
        ),
        Expanded(
          flex: 1,
          child: Container(color: Colors.transparent, width: 200),
        ),
      ],
    );
  }
}

四、页面1(文本页面)

textDemo.dart

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

class TextDemo extends StatelessWidget {
  const TextDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("textDemo"),
      ),
      body: MyHomeBody(),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  const MyHomeBody({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Text(
      "《定风波》 苏轼 \n莫听穿林打叶声,何妨吟啸且徐行。\n竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。",
      style: TextStyle(fontSize: 20, color: Colors.purple),
    );
  }
}

五、页面2(列表页面)

listViewDemo.dart

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('listViewDemo'),
      ),
      body: MyHomeBody(),
    );
  }
}

class MyHomeBody extends StatelessWidget {
  MyHomeBody({Key? key}) : super(key: key);
  final TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.redAccent);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("人的一切痛苦,本质上都是对自己无能的愤怒。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child:
              Text("人活在世界上,不可以有偏差;而且多少要费点劲儿,才能把自己保持到理性的轨道上。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("我活在世上,无非想要明白些道理,遇见些有趣的事。", style: textStyle),
        )
      ],
    );
  }
}

六、效果图

Flutter_firstApp_Q.png


Flutter_firstApp_V.png


Flutter_firstApp_X.png


posted @   fengMisaka  阅读(167)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示