如何使用底部菜单制作一些屏幕

时间:2018-12-28 09:32:50

标签: menu flutter

我正在做一个底部菜单。我要制作3个屏幕。为此,我想做3个单班。 1屏幕-1个班级。为此,请使用1个脚手架。我该怎么做?我的所有类都必须是StateFull才能使用函数“ setState”

我在Google源代码中被发现。但它们仅用于单个小部件

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;
    });
  }

}

1 个答案:

答案 0 :(得分:0)

这可以通过在
中将 Text 小部件替换为 classname 来完成。   _widgetOptions

制作文件时,请使用以下代码说 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'),
  ];

对于其他屏幕也是如此。 希望对您有帮助:)