Flutter开发新闻APP [页面创建和底部导航]

AI引领我开启Flutter实战项目之旅

页面效果

页面创建和底部导航

创建底部导航

main.dart

// 导入Flutter Material组件库和其他页面文件
import 'package:flutter/material.dart';
import 'pages/home/home_page.dart';
import 'pages/my/my_page.dart';

// 应用程序入口点
void main() {
  // 启动Flutter应用，传入MyApp作为根组件
  runApp(const MyApp());
}

// 应用的根组件，继承StatelessWidget（无状态组件）
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 构建方法，描述如何根据其他较低级别的widget构建显示界面
  @override
  Widget build(BuildContext context) {
    // MaterialApp是Material Design风格应用的主组件
    return MaterialApp(
      title: 'Flutter Demo', // 应用名称
      theme: ThemeData(
        // 设置应用主题，从种子颜色生成完整的配色方案
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),
      ),
      // 设置应用启动时显示的主页面
      home: const MainPage(),
    );
  }
}

// 主页面组件，继承StatefulWidget（有状态组件）
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  // 创建状态对象，用于管理页面的可变状态
  @override
  State<MainPage> createState() => _MainPageState();
}

// MainPage的状态类，管理页面的状态和业务逻辑
class _MainPageState extends State<MainPage> {
  // 当前选中的底部导航栏索引，late表示稍后初始化
  late int _currentIndex = 0;

  // 页面列表，包含首页和我的页面两个子页面
  final List<Widget> _pages = [const HomePage(), const MyPage()];

  // 构建主页面UI
  @override
  Widget build(BuildContext context) {
    // Scaffold提供基本的Material Design布局结构
    return Scaffold(
      // 根据当前选中的索引显示对应的页面
      body: _pages[_currentIndex],
      // 底部导航栏
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 设置当前选中项
        onTap: (index) {
          // 当用户点击导航项时触发的回调函数
          setState(() {
            // 更新当前索引并触发UI重新构建
            _currentIndex = index;
          });
        },
        selectedItemColor: Colors.black, // 选中项的颜色
        // 底部导航栏项目列表
        items: const [
          // 首页导航项
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '首页'),
          // 个人中心导航项
          BottomNavigationBarItem(icon: Icon(Icons.person), label: '我的'),
        ],
      ),
    );
  }
}

首页 home_page.dart

// 导入Flutter Material组件库
import 'package:flutter/material.dart';

// 首页页面组件，继承StatefulWidget（有状态组件）
class HomePage extends StatefulWidget {
  const HomePage({super.key});

  // 创建首页页面的状态对象
  @override
  State<HomePage> createState() => _HomePageState();
}

// 首页页面的状态类，管理首页的状态和业务逻辑
class _HomePageState extends State<HomePage> {
  // 构建首页页面的UI界面
  @override
  Widget build(BuildContext context) {
    // Scaffold提供基本的Material Design页面布局结构
    return Scaffold(
      // 应用栏（顶部导航栏）
      appBar: AppBar(
        // 标题文本
        title: const Text(
          '首页',
          // 标题文本样式：粗体，18号字体
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
        ),
        // 背景颜色设置为白色
        backgroundColor: Colors.white,
        // 去除阴影效果
        elevation: 0,
        // 标题不居中，靠左对齐
        centerTitle: false,
        // 阴影颜色设置为透明
        shadowColor: Colors.transparent,
        // 前景颜色（图标和文字颜色）
        foregroundColor: Colors.black87,
        // 右侧操作按钮区域
        actions: [
          // 搜索按钮
          IconButton(
            icon: const Icon(Icons.search), // 搜索图标
            onPressed: () {
              // 点击搜索按钮时显示SnackBar提示
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('搜索'), // 提示内容
                  backgroundColor: Colors.green, // 背景颜色为绿色
                ),
              );
            },
            tooltip: '搜索', // 长按提示文本
            splashRadius: 24, // 点击水波纹效果半径
            iconSize: 22, // 图标大小
          ),

          // 右侧间距，宽度为8
          const SizedBox(width: 8),
        ],
      ),
      // 页面主体内容
      body: SingleChildScrollView(
        // 内边距为零
        padding: EdgeInsets.zero,
        // 滚动物理效果：弹性滚动（iOS风格）
        physics: const BouncingScrollPhysics(),
        // 子组件居中显示
        child: Center(
          // 垂直排列的列布局
          child: Column(
            // 列的子组件列表
            children: [Text('首页')], // 显示"首页"文本
          ),
        ),
      ),
    );
  }
}

我的页面 my.dart

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  const MyPage({super.key});

  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '我的',
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
        ),
        backgroundColor: Colors.white,
        centerTitle: false,
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.zero,
        physics: const BouncingScrollPhysics(),
        child: Column(
            children: [
              Text('我的页面')
            ]
        ),
      ),
    );
  }
}