列表的点击事件
- onTap 点击事件
- onLongPress 长按事件
页面跳转传递参数
- Navigator.pushNamed(context, RouterName)
// item点击事件 传递当前item对象
Navigator.pushNamed(context, "DetailPage", arguments: item);
Widget
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: <Widget>[
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: <Widget>[
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: <Widget>[
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"),
),
],
)),
);
}
}