為什么螢屏不更新？

您好，我創建了一個帶有兩個圖示按鈕的自定義底部導航欄，如果我點擊某個圖示，我希望腳手架的主體發生變化，但它不起作用。

她是我的鱈魚：

int index = 0;

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> page = [
      const HomeScreen(),
      const FolderScreen(),
    ];

    return Scaffold(
      body: page[index],
      bottomNavigationBar: const CustomBottomNavigationBar(),
    );
  }
}

enum Pages {
  home,
  folder,
}

class CustomBottomNavigationBar extends StatefulWidget {
  const CustomBottomNavigationBar({
    Key? key,
  }) : super(key: key);

  @override
  State<CustomBottomNavigationBar> createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  Pages selectPage = Pages.home;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return SizedBox(
      width: size.width,
      height: 80.0,
      child: Stack(
        children: [
          CustomPaint(
            size: Size(size.width, 80.0),
            painter: BNBCustomPainter(),
          ),
          Center(
            heightFactor: 0.71,
            child: Transform.scale(
              scale: 1.25,
              child: FloatingActionButton(
                onPressed: () {},
                backgroundColor: Colors.blueAccent,
                elevation: 0.1,
                child: const Icon(
                  Icons.add,
                  size: 40,
                ),
              ),
            ),
          ),
          SizedBox(
            width: size.width,
            height: 80.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {
                    setState(() {
                      selectPage = Pages.home;
                      index = 0;
                      print(index);
                    });
                  },
                  icon: Icon(
                    Icons.home,
                    color: selectPage == Pages.home
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
                SizedBox(width: size.width * 0.20),
                IconButton(
                  onPressed: () {
                    setState(() {
                      selectPage = Pages.folder;
                      index = 1;
                      print(index);
                    });
                  },
                  icon: Icon(
                    Icons.folder,
                    color: selectPage == Pages.folder
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
} 

她你能看到我是否點擊了一些拖曳按鈕索引變數將值更改為 0（如果我點擊主頁圖示按鈕）或 1（如果我點擊檔案夾圖示按鈕）

我更改的索引號位于代碼的頂部，我使用它們來更改串列中我在“正文：頁面 [索引]”中使用的陣列的編號。

有人知道為什么body不更新嗎？

uj5u.com熱心網友回復：

您正在更新CustomBottomNavigationBar（因為 更新StatefulWidget）但是Home是StatelessWidget. 因此，為了更新主頁，您需要將其轉換為StatefulWidget（簡單情況）。另外，不要使用全域變數，而是使用回呼。

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    List<Widget> page = [
      const HomeScreen(),
      const Text("ss"),
    ];
    return Scaffold(
      body: page[index],
      bottomNavigationBar: CustomBottomNavigationBar(
        callback: (i) {
          setState(() {
            index = i;
          });
        },
      ),
    );
  }
}

class CustomBottomNavigationBar extends StatefulWidget {
  final Function(int index) callback;
  const CustomBottomNavigationBar({
    Key? key,
    required this.callback,
  }) : super(key: key);

  @override
  State<CustomBottomNavigationBar> createState() =>
      _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  Pages selectPage = Pages.home;

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;

    return SizedBox(
      width: size.width,
      height: 80.0,
      child: Stack(
        children: [
          Center(
            heightFactor: 0.71,
            child: Transform.scale(
              scale: 1.25,
              child: FloatingActionButton(
                onPressed: () {},
                backgroundColor: Colors.blueAccent,
                elevation: 0.1,
                child: const Icon(
                  Icons.add,
                  size: 40,
                ),
              ),
            ),
          ),
          SizedBox(
            width: size.width,
            height: 80.0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(
                  onPressed: () {
                    widget.callback(0);
                    setState(() {
                      selectPage = Pages.home;
                    });
                  },
                  icon: Icon(
                    Icons.home,
                    color: selectPage == Pages.home
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
                SizedBox(width: size.width * 0.20),
                IconButton(
                  onPressed: () {
                    widget.callback(1);
                    setState(() {
                      selectPage = Pages.folder;
                    });
                  },
                  icon: Icon(
                    Icons.folder,
                    color: selectPage == Pages.folder
                        ? kActiveBottomNavigationButtonColor
                        : kInactiveBottomNavigationButtonColor,
                    size: 35.0,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

標籤：扑镖颤振布局

上一篇：在記憶體中更新串列不會改變Flutter中的UI

下一篇：如何在一行中間解決這個“右溢位39像素錯誤”？