一、自定义 Widget
1. 无状态 StatelessWidget
import 'package:flutter/material.dart'
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text("无状态小部件")
}
}
2. 有状态 StatefulWidget
import 'package:flutter/material.dart'
class Example extends StatefulWidget {
@override
ExampleState createState() => ExampleState();
}
class ExampleState extends State<Example> {
@override
Widget build(BuildContext context) {
return Test("有状态小部件")
}
}
3. 接收参数
StatelessWidget
import 'package:flutter/material.dart';
class Example extends StatelessWidget {
final String title;
const Example(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(this.title)),
body: Text(this.title),
);
}
}
StatefulWidget
import 'package:flutter/material.dart';
class Example extends StatefulWidget {
final String title;
const Example({this.title}); //大括号方式接收参数
@override
ExampleState createState() => ExampleState();
}
class ExampleState extends State<Example> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title), //用 wedget 访问参数
body: Text(widget.title),
);
}
}
4. 引用,并传递参数
import 'package:flutter/material.dart'
import '../pages/Example.dart'; //引用自定义小部件
class Example extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Example("标题参数"); //向小部件传递参数
// return Example(title:"标题参数"); //向小部件传递参数,用大括号方式接收
}
}