例No.005-親コンポーネントが子コンポーネントメソッドを呼び出す-(フラッター2日目の学習)

テストアドレス:(Webページの読み込みが遅い)
Webページのデモ

1.プロジェクトを作成します

flutter create example005_fatherson

2.ASが開きます

3.依存関係を追加します

pubspec.yamlを変更します

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  english_words: ^3.1.5

4.mart.dartを変更します

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

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

// 重点是 sonKey 变量
GlobalKey<_RandomWordState> sonKey = GlobalKey();

class MyApp extends StatelessWidget {


  final wordPair = WordPair.random();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello world!',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:Center(
          // child: Text("Hello world!"),
          // child:Text(wordPair.asPascalCase),
        child:Container(
          alignment: Alignment.center,
          padding: EdgeInsets.all(10.0),
          child: GestureDetector(
          child: RandWords(key:sonKey),
          onTap: (){
            sonKey.currentState.change();
          }
          )
        ),
      )

    );
  }
}

class RandWords extends StatefulWidget
{
  RandWords({Key key}) : super(key: key);

  @override
  _RandomWordState createState() {
    return _RandomWordState();
  }

}

class _RandomWordState extends State<StatefulWidget>
{
  String _wordPair = WordPair.random().asPascalCase;

  void change()
  {
    setState(() {
      _wordPair = WordPair.random().asPascalCase;
    });
  }

  @override
  Widget build(BuildContext context)
  {
    // final wordPair = WordPair.random();
    return Text(_wordPair);
  }

}

5.デバッグと実行

最初にASでAndroidまたはiOSシミュレーターを開き、実行ボタンをクリックします。
または、コマンドラインで実行します。

flutter run

6.Webをパッケージ化します

flutter build web

おすすめ

転載: blog.csdn.net/qiang2080/article/details/115108748