Question

我有一个 BottomNavigationBar 小部件，但它在点击时根本不起作用。它不是更新页面。这是我的包含 BottomNavigationBar 小部件的文件：

    import 'package:flutter/material.dart';
import 'package:todo/screens/demo.dart';
import 'package:todo/screens/demo2.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final pages = [DemoScreen(), Demo2()];

  @override
  Widget build(BuildContext context) {
    var currentPageIndex = 0;

    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Add'),
          BottomNavigationBarItem(icon: Icon(Icons.remove), label: 'Remove')
        ],
        onTap: (index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        currentIndex: currentPageIndex,
        selectedItemColor: Colors.white,
        backgroundColor: Colors.blue,
      ),
      body: pages[currentPageIndex],
    );
  }
}

这些是我的屏幕： demo.dart

import 'package:flutter/material.dart';

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

... demo2.dart

import 'package:flutter/material.dart';

class Demo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.red,
      child: Align(
        alignment: Alignment.center,
        child: Text('Screen 2'),
      ),
    );
  }
}

谁能告诉我为什么不更新屏幕？任何帮助将不胜感激。

Answer 1

您需要将“currentPageIndex”变量移到 Build 函数之外。

因为在调用'setState()'时会调用'build()'，
'currentPageIndex' 值被重新定义并初始化为 0。

由于这个原因，虽然通过 'currentPageIndex = index' 代码改变了 'currentPageIndex' 值，但 'currentPageIndex' 值恢复为 0，并重新构建了 0 索引页。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final pages = [DemoScreen(), Demo2()];
  var currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabs'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Add'),
          BottomNavigationBarItem(icon: Icon(Icons.remove), label: 'Remove')
        ],
        onTap: (index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        currentIndex: currentPageIndex,
        selectedItemColor: Colors.white,
        backgroundColor: Colors.blue,
      ),
      body: pages[currentPageIndex],
    );
  }
}

class DemoScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello');
  }
}

class Demo2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      color: Colors.red,
      child: Align(
        alignment: Alignment.center,
        child: Text('Screen 2'),
      ),
    );
  }
}

BottomNavigationBar 在点击时不起作用

1 个答案: