【问题标题】:Navigator.pop(context) showing blankNavigator.pop(context) 显示空白
【发布时间】:2022-01-25 00:36:15
【问题描述】:

我试图使用 Navigator.pop(context) 导航回第一个屏幕,但它显示一个空白屏幕而不是返回第一个屏幕。 我该如何解决这个问题

主屏幕

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'GenderButton.dart';
import 'constants.dart';
import 'buttons.dart';
import 'resultpage.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Center(child: Text('')),
          elevation: 0,
          actions: [
            IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.add_alert_sharp,
                  size: 35,
                ))
          ],
          leading: IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.add,
              size: 35,
            ),
          ),
        ),
        body: HomeScreen());
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Gender SelectedGender = Gender.empty;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        //BMI Calculator Header
        Row(
          children: [
            SizedBox(
              width: 30,
            ),
            Text(
              'BMI Calculator',
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Gender Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Gender',
              style: TextStyle(fontSize: 17),
            ),
          ],
        ),
        SizedBox(
          height: 10,
        ),
        //Button Widget
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            BoxButton(
              Type: 'MALE',
              BorderColor: SelectedGender == Gender.male
                  ? activeCardColor
                  : inactiveCardColor,
              IconColor:
                  SelectedGender == Gender.male ? activeCardColor : inactiv,
              OnPress: () {
                setState(() {
                  SelectedGender = Gender.male;
                });
              },
            ),
            SizedBox(
              width: 15,
            ),
            BoxButton(
              Type: 'FEMALE',
              BorderColor: SelectedGender == Gender.female
                  ? activeCardColor
                  : inactiveCardColor,
              IconColor:
                  SelectedGender == Gender.female ? activeCardColor : inactiv,
              OnPress: () {
                setState(() {
                  SelectedGender = Gender.female;
                });
              },
            ),
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Weight Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            //Weight Text
            Text(
              'Weight',
              style: TextStyle(fontSize: 15),
            )
          ],
        ),
        SizedBox(
          height: 5,
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(8)),
              // margin: EdgeInsets.all(15),
              height: 50,
              width: 250,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RoundedIconButton(
                    icon: FontAwesomeIcons.minus,
                    onPressed: () {
                      setState(() {
                        Weight--;
                      });
                    },
                  ),
                  SizedBox(
                    width: 55,
                  ),
                  Text(
                    Weight.toString(),
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    width: 50,
                  ),
                  RoundedIconButton(
                    icon: FontAwesomeIcons.plus,
                    onPressed: () {
                      setState(() {
                        Weight++;
                      });
                    },
                  )
                ],
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              height: 50,
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(9)),
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        //Height Text
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Height',
              style: TextStyle(fontSize: 15),
            )
          ],
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Container(
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(8)),
              // margin: EdgeInsets.all(15),
              height: 50,
              width: 250,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RoundedIconButton(
                    icon: FontAwesomeIcons.minus,
                    onPressed: () {
                      setState(() {
                        Height--;
                      });
                    },
                  ),
                  SizedBox(
                    width: 55,
                  ),
                  Text(
                    Height.toString(),
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 20,
                        fontWeight: FontWeight.bold),
                  ),
                  SizedBox(
                    width: 50,
                  ),
                  RoundedIconButton(
                    icon: FontAwesomeIcons.plus,
                    onPressed: () {
                      setState(() {
                        Height++;
                      });
                    },
                  )
                ],
              ),
            ),
            SizedBox(
              width: 10,
            ),
            Container(
              height: 50,
              width: 100,
              decoration: BoxDecoration(
                  color: Colors.white, borderRadius: BorderRadius.circular(9)),
            )
          ],
        ),
        SizedBox(
          height: 20,
        ),
        Row(
          children: [
            SizedBox(
              width: 25,
            ),
            Text(
              'Age',
              style: TextStyle(fontSize: 18),
            )
          ],
        ),
        SizedBox(
          height: 5,
        ),
        Container(
          decoration: BoxDecoration(
              color: Colors.white, borderRadius: BorderRadius.circular(8)),
          height: 50,
          width: 369,
          child: Container(
            // margin: EdgeInsets.all(15),
            height: 50,
            width: 250,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                RoundedIconButton(
                  icon: FontAwesomeIcons.minus,
                  onPressed: () {
                    setState(() {
                      Age--;
                    });
                  },
                ),
                SizedBox(
                  width: 100,
                ),
                Text(
                  Age.toString(),
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 20,
                      fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  width: 110,
                ),
                RoundedIconButton(
                  icon: FontAwesomeIcons.plus,
                  onPressed: () {
                    setState(() {
                      Age++;
                    });
                  },
                )
              ],
            ),
          ),
        ),
        SizedBox(
          height: 20,
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (context) {
              return ResultPage();
            }));
          },
          child: Container(
            decoration: BoxDecoration(
                color: Color(0xFF06C46C),
                borderRadius: BorderRadius.circular(8)),
            height: 50,
            width: 369,
            child: Center(
                child: Text(
              'Calculate',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )),
          ),
        ),
      ],
    );
  }
}

屏幕 2

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

class ResultPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
          scaffoldBackgroundColor: Colors.black,
          textTheme: TextTheme(
            bodyText2: TextStyle(color: Colors.white),
          ),
          colorScheme: ColorScheme.light(
              primary: Colors.black, secondary: Colors.black)),
      home: Scaffold(
          appBar: AppBar(
            title: Center(child: Text('')),
            elevation: 0,
            actions: [
              IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.add_alert_sharp,
                    size: 35,
                  ))
            ],
            leading: IconButton(
              onPressed: () {},
              icon: Icon(
                Icons.add,
                size: 35,
              ),
            ),
          ),
          body: Results()),
    );
  }
}

class Results extends StatefulWidget {
  @override
  _ResultsState createState() => _ResultsState();
}

class _ResultsState extends State<Results> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Result',
            style: TextStyle(fontSize: 30),
          ),
          Center(
            child: Container(
              decoration: BoxDecoration(
                  color: Color(0xFF333335),
                  borderRadius: BorderRadius.circular(8)),
              margin: EdgeInsets.all(10),
              height: 300,
              width: 350,
            ),
          ),
          Center(
            child: Container(
              margin: EdgeInsets.all(35),
              child: Text('For your height , a normal would be from 48.6 '
                  'to 63.3 kilograms'),
            ),
          ),
          GestureDetector(
            onTap: () {
              Navigator.pop(context);
            },
            child: Container(
              decoration: BoxDecoration(
                  color: Color(0xFF06C46C),
                  borderRadius: BorderRadius.circular(8)),
              height: 50,
              width: 369,
              child: Center(
                  child: Text(
                'Recalculate BMI',
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              )),
            ),
          ),
        ],
      ),
    );
  }
}

如果你看看我如何定位我的所有小部件以获得与我在 dribble enter link description here 上看到的设计相同的样式,我做得对吗?因为我觉得我做错了,我还是个初学者,我试图重现我从 udemy 上购买的课程中学到的东西?

【问题讨论】:

    标签: flutter dart navigation flutter-layout flutter-animation


    【解决方案1】:

    试试下面的代码希望它对你有帮助。设置rootNavigator: true

    参考导航here , here, here

       Navigator.of(
            context,
            rootNavigator: true,
          ).pop(
            context,
          );
    

    或者也试试下面的解决方案

    Navigator.pop(context);
    

    完整代码:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MaterialApp(
        title: 'Navigation Basics',
        home: FirstRoute(),
      ));
    }
    
    class FirstRoute extends StatelessWidget {
      const FirstRoute({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('First Route'),
          ),
          body: Center(
            child: ElevatedButton(
              child: const Text('Open route'),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SecondRoute()),
                );
              },
            ),
          ),
        );
      }
    }
    
    
    class SecondRoute extends StatefulWidget {
      const SecondRoute({Key? key}) : super(key: key);
    
      @override
      State<SecondRoute> createState() => _SecondRouteState();
    }
    
    class _SecondRouteState extends State<SecondRoute> {
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Second Route"),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('Go back!'),
            ),
          ),
        );
      }
    }
    

    测试这段代码here

    【讨论】:

    • 您好感谢您的回复,我知道为什么它返回一个空白页面,这是因为我使用的是有状态小部件而不是无状态小部件。如果你看看我是如何设计我的小部件的,那就太好了,或者我该如何改进
    • 这对于我使用的哪个小部件也没有必要尝试这个也有状态的小部件。检查我的更新答案
    • 现在工作正常
    猜你喜欢
    • 1970-01-01
    • 2018-12-18
    • 2019-08-28
    • 2019-05-12
    • 1970-01-01
    • 1970-01-01
    • 2018-09-11
    • 1970-01-01
    • 2021-07-28
    相关资源
    最近更新 更多