基于Flutter的开源中国客户端（5）——App整体布局框架搭建

2024-01-06 09:32:18

一、项目准备

安装Flutter SDK：按照Flutter官方文档中的步骤安装Flutter SDK。
创建Flutter项目：打开终端窗口，切换到工作目录，然后执行以下命令：

flutter create开源中国

这将创建一个名为“开源中国”的Flutter项目。
3. 导入必要的库：在项目的pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.3

然后运行以下命令安装依赖项：

flutter pub get

二、搭建布局框架

创建主页：在项目的主目录下创建一个名为main.dart的文件，并在其中添加以下代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '开源中国',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '开源中国'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('这是页面$_selectedIndex'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '首页',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: '搜索',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '我的',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

创建侧滑菜单：在项目的主目录下创建一个名为drawer.dart的文件，并在其中添加以下代码：

import 'package:flutter/material.dart';

class DrawerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            child: Text('侧滑菜单'),
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
          ),
          ListTile(
            title: Text('首页'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('搜索'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            title: Text('我的'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  }
}