时间戳

首页 > 解决方案 > 我怎样才能用底部菜单制作一些屏幕

menu - 我怎样才能用底部菜单制作一些屏幕

问题描述

我正在制作一个底部菜单。我想做3个屏幕。为此，我想做 3 个单节课。1 个屏幕 - 1 个班级。为此，所有这些都使用 1 脚手架。我该怎么做？我所有的课程都必须是 StateFull 才能使用函数“setState”

我是在谷歌源代码中找到的。但它们适用于单个小部件

import 'package:flutter/material.dart';
import 'package:async/async.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {


  int _selectedIndex = 1;

  final _widgetOptions = [
    Text('Index 0: Home'),
    Text('Index 1: Business'),
    Text('Index 2: School'),
  ];

  @override
  Widget build(BuildContext context) {
    //API_Tumbler api = new API_Tumbler("3EuKq8hIimaGFxY3wqzL7MXw5qZuN3Zcx9cIEgWKT4UTINwGec", "gjkCRximp0OJtFGN4Zd8xD2yPMwjw557EtgVvKhmqLNdI9IOBx");
    return Scaffold(
      appBar: AppBar(
        title: Text("Miner of Memes"),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Блоги'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.subject),
            title: Text('Лента'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.send),
              title: Text('Отправка')
          )
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }

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

}

标签： menuflutter

解决方案

这可以通过用_widgetOptions中的类名替换Text小部件来完成。

使用以下代码创建一个文件，让我们说firstScreen.dart ：

class Firstscreen extends StatefulWidget {
  const FirstScreen({ Key key }) : super(key: key);

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

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Text("This is FirstScreen);
  }
}

现在在你的代码中编辑这个。

import './firstScreen.dart' //include the file created

...

final _widgetOptions = [
    FirstScreen(),
    Text('Index 1: Business'),
    Text('Index 2: School'),
  ];

对其他屏幕也这样做。希望它可以帮助你:)

推荐阅读