Flutter基础(二)

列表的点击事件

• onTap 点击事件
• onLongPress 长按事件

页面跳转传递参数

• Navigator.pushNamed(context, RouterName)
  // item点击事件 传递当前item对象
  Navigator.pushNamed(context, "DetailPage", arguments: item);

Widget

• Text

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
        centerTitle: true,
        backgroundColor: Colors.red,
      ),
//      bottomNavigationBar: BottomNavigationBar(items: null),
//      bottomSheet: BottomSheet(onClosing: null, builder: null),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          // Column is also a layout widget. It takes a list of children and
          // arranges them vertically. By default, it sizes itself to fit its
          // children horizontally, and tries to be as tall as its parent.
          //
          // Invoke "debug painting" (press "p" in the console, choose the
          // "Toggle Debug Paint" action from the Flutter Inspector in Android
          // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
          // to see the wireframe for each widget.
          //
          // Column has various properties to control how it sizes itself and
          // how it positions its children. Here we use mainAxisAlignment to
          // center the children vertically; the main axis here is the vertical
          // axis because Columns are vertical (the cross axis would be
          // horizontal).
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RaisedButton(
              child: Text("click to listPage"),
              onPressed: () {
                Navigator.pushNamed(context, "ListPage");
              },
            ),
            RaisedButton(
              child: Text("click to TestPage"),
              onPressed: () {
                Navigator.pushNamed(context, "TestTwo");
              },
            ),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            Text('test'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        // 点击跳转列表页
//        onPressed: () {
//          Navigator.push(context, MaterialPageRoute(builder: (context) {
//            return ListPage();
//          }));
//        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );

• Button
  RaisedButton: 凸起的按钮
  FlatButton：扁平化按钮
  OutlineButton：带边框按钮
  IconButton：带图标按钮

import 'package:flutter/material.dart';

class ButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ButtonPage"),
      ),
      body: new Column(
        children: [
          RaisedButton(
            child: Text("raise button"),
            onPressed: () {},
          ),
          FlatButton(
            child: Text("flat button"),
            color: Colors.red,
          ),
          OutlineButton(
            child: Text("outline button"),
            textColor: Colors.blue,
          ),
          IconButton(
            icon: Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}

• Container
  Container是非常常用的一个widget，他一般是用作一个容器。
  基础属性

import 'package:flutter/material.dart';

class ContainerPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Title(
          child: Text("container page"),
          color: Colors.red,
        ),
      ),
      body: Center(
          child: new Column(
        children: [
          Container(
            color: Colors.red,
            width: 200,
            margin: EdgeInsets.only(left: 150),
            padding: EdgeInsets.only(right: 150),
            height: 200,
            // 旋转
            transform: Matrix4.rotationZ(0.5),
            child: Text(
              "hello container",
              style: TextStyle(fontSize: 30, color: Colors.black),
            ),
          ),
          Image(
            image: NetworkImage(
                "https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white-d0c9fe2af5.png"),
          ),
        ],
      )),
    );
  }
}