16-19 learning navigation parameters based delivery and receipt of Flutter (1)

Copyright: Attribution, allow others to create paper-based, and must distribute paper (based on the original license agreement with the same license Creative Commons )

       This introduces the page jump when passing parameters and acceptance. Used in the program explanation is that you get into a commodity such as selection list, when you want to select a specific item of information, you have to deliver the product number, after receiving the detailed page numbers, showing different content.

Knowledge points: 

First, the use of assembly Awesome Flutter snippets

       Our code some more, this time we want to accelerate the speed to knock code, you can use VSCode the Awesome Flutter snippetsplug. It can help us to quickly generate common code snippets Flutter. Such as input stlsswill give us generate the following code:

class name extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
    );
  }
}

Second, the class data structure declarations

Dart can be used in a class to abstract data, such as we imitate a commodity information, commodity title and description of goods. We define a Product class, inside there are two string variables, title and description.

• title: is the commodity title.
• description: Product Details Description

code show as below:

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

 Third, build a product list

Make a list of items, here we use the dynamic construction method, passing a Product List (List) method in the main Widget to self-definition.

Let's look at the main method of writing code:

void main(){
  runApp(MaterialApp(
    title:'数据传递案例',
    home:ProductList(
      products:List.generate(
        20, 
        (i)=>Product('商品 $i','这是一个商品详情，编号为:$i')
      ),
    )
  ));
}

The above code is the main crossing documents, mainly in home properties, we used ProductList, this custom components, and time will complain, because we lack this component. The components of our products pass a parameter, which is a list of data items, we use this data is List.generategenerated. And the resulting prototype is Product List we started the class defined (abstract data).

ProductList custom code components:

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

 Accept a transfer from the parameters of the main method, after a receiving ListView.buildermethod, a dynamic list were formed according to the data transmission parameters.

Four, demo of the total source code as follows:

import 'package:flutter/material.dart';
//定义一个商品类
class Product{
  final String title;   //商品标题
  final String description;//商品描述
  Product(this.title,this.description);
}

void main() {
  runApp(MaterialApp(
     title: '商品数据的传递和接收案例',
     //生成一个商品列表
     home: ProducList(
       //用List.generate生成商品数据
       products:List.generate(20, (i)=>Product('商品:$i','这是一个商品描述，编号是$i'))
     ),
  ));
}
class ProducList extends StatelessWidget {
  final List<Product> products;
  //接收主方法传递过来的参数(构造方法)
  ProducList({Key key,@required this.products}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品列表'),),
      //用ListView.builder方法，作了一个根据传递参数数据形成的动态列表
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){//构建item
          return ListTile(
            title: Text(products[index].title),
            onTap: (){},//item的点击事件
          );
        },
      ),
    );
  }
}

 Fifth, the operating results are as follows:

​​​​​​​