Flutter Primeiros passos quatro

Navegue no salto de página pai-filho

Exemplo de código:

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);
            }),
      ),
    );
  }
}

Interface de execução:

Transferência e aceitação de parâmetros de navegação

Esta parte do código exige muito trabalho, então podemos gerar uma parte automaticamente. Primeiro, baixe um plug-in VSCode: Depois de

ter este plug-in, digite:

pressione enter para gerar:

outras funções podem ser visualizadas especificamente no plug-in Descrição

A seguir está o exemplo de código:

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}'),
      ),
    );
  }
}

Interface de execução:

Salto de página e dados de retorno

Exemplo de código:

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');
              },
            ),
          ],
        ),
      ),
    );
  }
}

Interface de execução:

Processamento de recursos estáticos e imagens do projeto

Primeiro, crie uma pasta [imagens] no diretório raiz do projeto e coloque as imagens que deseja usar nela:

Em seguida, encontre [pubspec.yaml] para importar as imagens:

[main.dart] exemplo de código:

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'),
    );
  }
}

Interface de execução:

Embalagem Flutter

Tome o Android como exemplo:

Alterar ícone do aplicativo

Em primeiro lugar, há o problema com o ícone do App. Basta alterar o ícone nas seguintes partes (o nome do arquivo deve ser o mesmo):

Não se esqueça de alterar a configuração de referência do ícone:

Alterar o nome do aplicativo

Depois, há o nome do aplicativo:

Gerar armazenamento de chaves

A próxima etapa é gerar o armazenamento de chaves. Existem muitos pits aqui. A escrita oficial é muito simples. Contanto que você execute o seguinte código no terminal, você pode ter sucesso, mas o fato é que um erro é relatado:

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

Não consigo encontrar esse diretório. É realmente uma armadilha. Na verdade, simplesmente não configuramos as variáveis ​​de ambiente. Mas não vale a pena configurar variáveis ​​de ambiente para um pacote; [mas eu configurei hahaha]

Neste momento, você pode usar o seguinte comando para encontrar a localização do keytool.exe:

flutter doctor -v

O que estamos procurando aqui é na verdade este endereço java:

neste momento você copia diretamente o comando e o insere, mas também há uma armadilha aqui, ou seja, se a pasta estiver vazia, você precisa colocá-la entre aspas, por exemplo:

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

Mas eu não fiz. Eu deveria ser assim:

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

Mas porque configurei o ambiente, sou assim:

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

Esta tudo bem? Então você é muito ingênuo e ainda relatará um erro:

O principal problema desse erro é que o diretório não existe e não tem permissões de gravação, portanto, precisamos substituir um diretório por permissões de gravação. Alteramos o comando para o seguinte formato:

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

Configure o ambiente diretamente:

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

Neste momento, ele pode ser criado com sucesso. Haverá um arquivo Jks na unidade D. Lembre-se de que este arquivo não pode ser compartilhado com ninguém.

Com este arquivo key.jks, você pode ir para a androidpasta do diretório do projeto , criar um arquivo chamado key.properties e abrir e colar o seguinte código:

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

Meu arquivo acabou assim:

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

Não o compartilhe neste trabalho, mesmo se a chave for gerada com sucesso.

Configurar registro de chave

Depois que a chave é gerada, ela precisa ser configurada no arquivo build.gradle. Este processo é realmente muito simples, basta colar e copiar algo, você não precisa saber o uso específico desses arquivos.

o primeiro item:

/Android/app/build.gradle arquivo no diretório do projeto, na android{ frente desta linha, adicione o seguinte código:

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

Substitua o seguinte código:

Código substituído:

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

Gerar apk

Diretamente no terminal, a entrada flutter build apkdo pacote é bem-sucedida, podemos ser inseridos diretamente no terminal flutter installpara fazer o apk instalado em uma máquina virtual;

isso é um sucesso:

Após o sucesso pode ser gerado no build -> app -> saídas - > pasta apk para obter o final Teste de instalação do arquivo apk empacotado: