為什么顫動打印出小部件名稱？

Question

運行應用程序后，我在打印名稱和渲染 Widget 名稱時遇到問題

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
    if (loggedIn == true) {
       Home();
    } else {
      return LoginOrSignup();
    }
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(body:SafeArea(
          child: FutureBuilder(
            future: autoLogin(),
            builder: (BuildContext context, snapshot) {
              if (snapshot.hasData) {
                return Text('${snapshot.data}');
              } else {
                return LoginOrSignup();
              }
            }),

        ))
    );
  }
}

運行應用程序后，輸出為LoginOrSignup()

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Center(
            child: MaterialButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Login()),
                );

              },
              child: Text('Loginsss'),
            ),
          ),
          Center(
            child: MaterialButton(
              onPressed: (){
                 Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => Signup()),
                );
              },
              child: Text('Signup'),
            ),
          )
        ],
      ),
    );
  }
}

我曾嘗試使用另一個像 Text() 這樣的小部件，但是當我在移動應用程序上運行應用程序時，它仍然打印出相同的內容。 問題似乎出現在我擁有的 autoLogin() 函數中

Answer 1

問題是你未來返回小部件本身，當你使用Text('${snapshot.data}')它打印小部件時，為了簡單起見，你可以從 Future 返回數據（這是我們主要做的）。 假設您喜歡返回小部件本身。

Future 需要稍作修正。

  Future<Widget> autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
    if (loggedIn == true) {
      return Home();
    } else {
      return LoginOrSignup();
    }
  }

和

return MaterialApp(
    home: Scaffold(
        body: SafeArea(
  child: FutureBuilder<Widget>(
    future: autoLogin(),
    builder: (BuildContext context, snapshot) {
      if (snapshot.hasData) {
        return snapshot.data!;
      } else {
        return LoginOrSignup();
      }
    }),
)));

Answer 2

您在autoLogin函數中返回一個Widget 。 相反，您應該返回一個bool 。

Future<bool?> autoLogin() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    bool? loggedIn = prefs.getBool('loggedin');
if (loggedIn == null) return null;
    if (loggedIn == true) {
       return true;
    } else {
      return false;
    }
  }

然后在 FutueBuilder 中，您可以檢查它是否返回 Home()

if (snapshot.hasData && snapshot.data! == true) {
                return Home();
              } else {
                 return LoginOrSignup();