实现BottomNavigationBar [英] Implement BottomNavigationBar

问题描述

我尝试为我的应用程序实现BottomNavigationBar。

I tried to implement a BottomNavigationBar to my app. But I don't get it to work.

所以这是我的代码：

// Vertretungsplan Montag

class VPMontag extends StatelessWidget {
  String url;
  VPMontag(this.url);

最终完成者_controller =
Completer（）;

final Completer _controller = Completer();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Vertretungsplan Montag'),
        ),
        body: Builder(builder: (BuildContext context) {
          return WebView(
            initialUrl: url,
            javascriptMode: JavascriptMode.unrestricted,
            onWebViewCreated: (WebViewController webViewController) {
              _controller.complete(webViewController);
            },
            navigationDelegate: (NavigationRequest request) {
              if (request.url.startsWith('https://www.youtube.com/')) {
                print('blocking navigation to $request}');
                return NavigationDecision.prevent;
              }
              print('allowing navigation to $request');
              return NavigationDecision.navigate;
            },
            onPageStarted: (String url) {
              print('Page started loading: $url');
            },
            onPageFinished: (String url) {
              print('Page finished loading: $url');
            },
            gestureNavigationEnabled: true,
          );
        }));
  }
}



...

  vpmontag() {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => VPMontag('myurl')));
  }


  int _selectedIndex = 0;
  static TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Center(
      child: Container(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: vpmontag,
              child: Text('Montag'),
            ),
          
            ),
          ],
        ),
      ),
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];



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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('VP App'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Startseite'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.view_headline),
            title: Text('Vertretungspläne'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.calendar_today),
            title: Text('Stundenpläne'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

但是我得到这个错误：

Compiler message:
lib/main.dart:314:26: Error: Can't access 'this' in a field initializer to read 'vpmontag'.
              onPressed: vpmontag,
                         ^^^^^^^^

我有 ; VP Montag。五次但使用其他名称。

I have the class "VP Montag" five times but with other names.

我该如何解决？我是否必须添加一个 this.vpmontag？还是在任何地方？

How can I solve this? Do I have to add a "this.vpmontag" or so anywhere?

任何帮助都非常感谢。

推荐答案

只需尝试初始化状态类的 initState（）方法中的 _widgetOptions 变量

just try to initialize _widgetOptions variable in initState() method of State class

List<Widget> _widgetOptions = [];

  @override
  void initState() {
    _widgetOptions = <Widget>[
      Text(
        'Index 0: Home',
        style: optionStyle,
      ),
      Center(
        child: Container(
          child: Column(
            children: <Widget>[
              RaisedButton(
                onPressed: vpmontag,
                child: Text('Montag'),
              ),
            ],
          ),
        ),
      ),
      Text(
        'Index 2: School',
        style: optionStyle,
      ),
    ];
    super.initState();
  }

这篇关于实现BottomNavigationBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！