フラッター入門ノート4

親子ページに移動して戻る

コード例：

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MaterialApp(
    title: "导航演示",
    home: new FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('导航页面'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('查看商品详情页'),
          onPressed: () {
    
    
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => new SecondScreen()));
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('商品详情页'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('返回'),
            onPressed: () {
    
    
              Navigator.pop(context);
            }),
      ),
    );
  }
}

インターフェースの実行：

ナビゲーションパラメータの転送と受け入れ

ハンドノッキングコードのこの部分は、大量の作業を必要とするため、自動的に部分を生成できます。まず、VSCodeプラグインをダウンロードします。

このプラグインを入手したら、次のように入力します。Enterキーを

押して生成します。

他の機能はプラグインで具体的に表示できます。説明

次はコード例です：

import 'package:flutter/material.dart';

class Product {
    
    
  final String title; //商品标题
  final String description; //商品描述
  Product(this.title, this.description); //构造函数
}

//入口文件
void main() {
    
    
  runApp(MaterialApp(
    title: '导航的数据传递和接受',
    home: ProductList(
        products: List.generate(
            20, (index) => Product('商品 $index', '这是一个商品详情,编号为:$index'))),
  ));
}

class ProductList extends StatelessWidget {
    
    
  final List<Product> products;
  ProductList({
    
    Key key, @required this.products}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
    
    
          return ListTile(
            title: Text(products[index].title),
            onTap: () {
    
    
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) =>
                          ProductDetail(product: products[index])));
            },
          );
        },
      ),
    );
  }
}

class ProductDetail extends StatelessWidget {
    
    
  final Product product;
  ProductDetail({
    
    Key key, @required this.product}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('${product.title}'),
      ),
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

インターフェースの実行：

ページジャンプしてデータを返す

コード例：

import 'package:flutter/material.dart';

//入口文件
void main() {
    
    
  runApp(MaterialApp(title: '页面跳转返回数据', home: FirstPage()));
}

class FirstPage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('阿巴阿巴阿巴阿巴'),
      ),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return RaisedButton(
      onPressed: () {
    
    
        _navigateToABa(context);
      },
      child: Text('阿巴阿巴阿巴阿巴'),
    );
  }

  _navigateToABa(BuildContext context) async {
    
    
    final result = await Navigator.push(
        context, MaterialPageRoute(builder: (context) => ABa()));
    Scaffold.of(context).showSnackBar(SnackBar(
      content: Text('$result'),
    ));
  }
}

class ABa extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎来到妙妙屋！'),
      ),
      body: Center(
        child: Column(
          children: [
            RaisedButton(
              child: Text('玛卡巴卡'),
              onPressed: () {
    
    
                Navigator.pop(context, '玛卡巴卡:1511008888');
              },
            ),
            RaisedButton(
              child: Text('迪西唔西'),
              onPressed: () {
    
    
                Navigator.pop(context, '迪西唔西:1511009999');
              },
            ),
          ],
        ),
      ),
    );
  }
}

インターフェースの実行：

静的リソースとプロジェクト画像の処理

まず、プロジェクトのルートディレクトリに[images]フォルダを作成し、その中に使用する画像を配置します。

次に、[pubspec.yaml]を見つけて画像をインポートします。

[main.dart]コード例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Container(
      child: Image.asset('images/taylor.jpg'),
    );
  }
}

インターフェースの実行：

フラッターパッケージ

例としてAndroidを取り上げます。

アプリアイコンの変更

まず、アプリのアイコンに問題があります。次の部分のアイコンを変更するだけです（ファイル名は同じである必要があります）。

アイコンの参照設定を変更することを忘れないでください。

アプリ名を変更する

次に、アプリの名前があります：

生成 keystore

次のステップは、キーストアを生成することです。ここには多くのピットがあります。公式の記述は非常に簡単です。ターミナルで次のコードを実行する限り、成功することができますが、実際にはエラーが報告されます。

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

このディレクトリがまったく見つかりません。これは本当に落とし穴です。実際、環境変数を構成していません。ただし、パッケージの環境変数を構成する価値はありません。[しかし、私はハハハを構成しました]

このとき、次のコマンドを使用してkeytool.exeの場所を見つけることができます。

flutter doctor -v

ここで探しているのは、実際にはjavaアドレスです。

この時点で、コマンドを直接コピーして入力しますが、ここにも落とし穴があります。つまり、フォルダーが空の場合は、引用符で囲む必要があります。たとえば、次のようになります。

D:\Program\Android\'Android Studio'\jre\bin\keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

しかし、私はしませんでした。私はこのようになるはずです：

C:\Users\86135\Downloads1\jre\bin\keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

しかし、私は環境を構成したので、次のようになります。

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

これで大丈夫ですか？それからあなたはあまりにも素朴で、それでもエラーを報告します：

このエラーの主な問題は、ディレクトリが存在せず、書き込み権限がないことです。そのため、ディレクトリを書き込み権限に置き換える必要があります。コマンドを次の形式に変更しました。

C:\Users\86135\Downloads1\jre\bin\keytool -genkey -v -keystore D:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

環境を直接構成します。

keytool -genkey -v -keystore D:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

このとき、正常に作成できます。Dドライブの下にJksファイルがあります。このファイルは誰とも共有できないことに注意してください。

このkey.jksファイルを使用して、プロジェクトディレクトリandroidフォルダに移動し、key.propertiesという名前のファイルを作成して、次のコードを開いて貼り付けることができます。

storePassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥库 密码
keyPassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥 密码
keyAlias=key
storeFile=<E:/key.jks>    //key.jks的存放路径

私のファイルは次のようになりました：

storePassword=123123
keyPassword=123123
keyAlias=key
storeFile=D:/key.jks

キーが正常に生成されたとしても、この作業では共有しないでください。

キー登録を構成する

キーが生成されたら、build.gradleファイルで構成する必要があります。このプロセスは実際には非常に単純で、何かを貼り付けてコピーするだけで、これらのファイルの特定の使用法を知る必要はありません。

最初の項目：

/Android/app/build.gradleファイルをプロジェクトディレクトリandroid{ のこの行の前に、次のコードを追加します。

def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

次のコードを

置き換えます。置き換えられたコード：

signingConfigs {
    
    
    release {
    
    
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    
    
    release {
    
    
        signingConfig signingConfigs.release
    }
}

apkを生成する

flutter build apkパッケージの端末入力に直接入力すると、端末に直接入力flutter installしてapkを仮想マシンにインストールできます。

これは成功です。

ビルド->アプリ->出力- > apkフォルダーで成功を生成した後、最終版を取得します。パッケージ化されたapkファイルのインストールトライアル：