App下載

在Android中的Flutter要怎么正確顯示SnackBar？Flutter正確顯示SnackBar方法分享！

倚靠窗畔 2021-08-20 16:09:27 瀏覽數(shù) (2765)
反饋

今天和大家分享有關(guān)于“在Android中的Flutter要怎么正確顯示SnackBar？”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享，希望小編的小伙伴們有所幫助！

簡(jiǎn)介

官方API文檔Scaffold的of方法說(shuō)明有說(shuō)明調(diào)用Scaffold.of方法是在Scallfold的子組件的Build方法中，也就是不能直接在構(gòu)建Scaffold的build方法里調(diào)用，否則會(huì)拋異常。

Typical usage of the Scaffold.of function is to call it from within the build method of a child of a Scaffold.

通常為顯示一個(gè)SnackBar需要構(gòu)建一個(gè)Builder，通過(guò)Builder的context調(diào)用（原因是）

Scallfold.of(context).showSnackBar(SnackBar(contenxt: Text('這是一個(gè)SnackBar'));

官方示例

顯示SnackBar，官方典型示例代碼如下所示：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Code Sample for Scaffold.of.',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: MyScaffoldBody(),
        appBar: AppBar(title: Text('Scaffold.of Example')),
      ),
      color: Colors.white,
    );
  }
}

// 在Scaffold子組件里的build方法可以調(diào)用Scaffold.of方法
class MyScaffoldBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        child: Text('SHOW A SNACKBAR'),
        onPressed: () {
          Scaffold.of(context).showSnackBar(
            SnackBar(
              content: Text('Have a snack!'),
            ),
          );
        },
      ),
    );
  }
}

錯(cuò)誤示例

但是若直接在構(gòu)建Scallfold的build方法中調(diào)用會(huì)報(bào)異常:

Scaffold.of() called with a context that does not contain a Scaffold.

錯(cuò)誤代碼如下所示：

import 'package:flutter/material.dart';

class ScaffoldSnackBarDemo extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('SHOW A SNACKBAR'),
          onPressed: () {
            ///直接在Scallfold的build方法里使用會(huì)拋異常
            Scaffold.of(context).showSnackBar(
              SnackBar(
                content: Text('Have a snack!'),
              ),
            );
          },
        ),
      ),
      appBar: AppBar(title: Text('Scaffold.of Example')),
    );
  }
}

解決方法一：Scaffold的子組件通過(guò)Builder構(gòu)建

這時(shí)候要不就是按官方的，將需要顯示SnackBar的代碼另外抽離一個(gè)自定義子組件，在子組件的build方法再顯示SnackBar，要不就是在Scaffold的build方法體對(duì)該子組件再包一層Builder，如下所示。

import 'package:flutter/material.dart';

class ScaffoldSnackBarDemo extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       ///在子組件外再包一層builder，讓context不共用
      body: Builder(builder: (context) {
        return Center(
          child: RaisedButton(
            child: Text('SHOW A SNACKBAR'),
            onPressed: () {
              Scaffold.of(context).showSnackBar(
                SnackBar(
                  content: Text('Have a snack!'),
                ),
              );
            },
          ),
        );
      }),
      appBar: AppBar(title: Text('Scaffold.of Example')),
    );
  }
}

解決方法二：使用GlobalKey存儲(chǔ)ScaffoldState

import 'package:flutter/material.dart';

class ScaffoldSnackBarDemo extends StatelessWidget {
  final _scallfoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ///使用GlobalKey解決
      key: _scallfoldKey,
      body: Center(
        child: RaisedButton(
          child: Text('SHOW A SNACKBAR'),
          onPressed: () {
            _scallfoldKey.currentState.showSnackBar(SnackBar(
              content: Text('Have a snack!'),
            ));
          },
        ),
      ),
      appBar: AppBar(title: Text('Scaffold.of Example')),
    );
  }
}

Flutter學(xué)習(xí)Github代碼倉(cāng)庫(kù)

https://github.com/AiguangLi/Flutter

那么以上的內(nèi)容就是今天有關(guān)于“在Android中的Flutter要怎么正確顯示SnackBar？”這個(gè)問(wèn)題的相關(guān)內(nèi)容分享，更多有關(guān)于Android的相關(guān)知識(shí)內(nèi)容我們都可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解！

 
Android

0 人點(diǎn)贊