flutter 实战二：数据传递

上一篇我实践了flutter项目的搭建和基本静态页面逻辑的编写。
现在我来试试数据传递～
页面直接数据传递：比较简单直接看代码吧～主页面向装车单传递了2个参数
装车单页面：

import 'package:flutter/material.dart';

class Page3 extends StatefulWidget {
  Page3({Key key, this.data, this.title}) : super(key: key);
  //这句就是数据传递的接受，不先声明需要的参数，传了也会报错的！
  final data;
  final title;

  @override
  _PageState createState() => _PageState();
}

class _PageState extends State<Page3> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Center(
        child: Column(
          children: <Widget>[
            PhysicalModel (
              color: Colors.blue,
              elevation: 6,
              child: Container(
                padding: new EdgeInsets.only(top: 50,left: 40, right: 40, bottom: 19),
                child: Container(
                  height: 40.0,
                  padding: new EdgeInsets.only(left: 10),
                  decoration: new BoxDecoration(
                    color: Colors.blue[200],
                    borderRadius: new BorderRadius.circular(25.0),
                  ),
                  child: TextFormField(
                    style: new TextStyle(color: Colors.white70,fontSize: 14),//输入文字颜色和大小
                    decoration: InputDecoration(
                      hintText: '请输入订单号搜索',//文字提示
                      hintStyle: new TextStyle(color: Colors.white70),//提示文字颜色
                      icon: Icon(Icons.search, color: Colors.white70),//图标
                      border: InputBorder.none,//去掉下划线
                    ),
                  ),
                ),
              ),
            ),
            Container(
              padding: new EdgeInsets.only(top: 200),
              child: new Image.asset('images/order-empty.png'),
            ),
            new MaterialButton(
              onPressed: () {
                print(widget.data);//使用你得到的参数
                //Navigator.pushNamed(context, '/page2');
              },
              child: Text('前往配送单,${widget.title}'),//使用你得到的参数
            )
          ],
        ),
      )
    );
  }
}

主页面传递

import 'package:flutter/material.dart';
import './page3.dart';
import './page4.dart';
import './page5.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;
  var tabs = [{"title":'装车单',"index":0},{"title":'历史单据',"index":1},{"title":'我的',"index":2}];
  var tabImages = [new Image.asset('images/icon-car.png'),new Image.asset('images/icon-my.png'),new Image.asset('images/icon-order.png')];
  var tabImagesSelected = [new Image.asset('images/icon-car-blue.png'),new Image.asset('images/icon-my-blue.png'),new Image.asset('images/icon-order-blue.png')];
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  var _body;
  void initData() {//初始化函数
    _body = [
      new Page3(data: _selectedIndex,title:'as'),//这里我传递了在page3已经声明过的参数
      new Page4(),
      new Page5(),
    ];
  }
  Image getTabIcon(int index) {
    return _selectedIndex == index ? tabImagesSelected[index] : tabImages[index];
  }
  @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(//Scaffold是Material中主要的布局组件
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: getTabIcon(0), title: Text('装车单')),
          BottomNavigationBarItem(icon: getTabIcon(1), title: Text('历史单据')),
          BottomNavigationBarItem(icon: getTabIcon(2), title: Text('我的')),
        ],
        fixedColor: Colors.blue,//选择的颜色
        onTap: _onItemTapped,
        currentIndex: _selectedIndex,
      ),
      body: _body[_selectedIndex],
    );
  }
}

效果：圈起来那个就是获取到并且显示出来的参数

结果

下一篇继续，来看从后端获取数据吧～（有时间就会更新，一起来完成一个完整的flutter app 吧）