在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget / StatefulWidget。
StatelessWidget 是无状态组件,状态不可变的 widget;
StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget;
vscode 安装相关的插件,代码补充提示:
1 简单实例
利用安装的插件,使用 statefulW
命令快速生成有状态组件代码块:
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatefulWidget { // StatefulWidget 是一个抽象类
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState(); // 实现抽象方法 createState
}
class _HomePageState extends State<HomePage> { // 继承 State 类
int count = 0;
@override
Widget build(BuildContext context) {
return Container(
child: Container(
height: 300,
width: 300,
color: Colors.pink,
child: Column(
children: <Widget>[
Chip(label: Text("${this.count}")),
SizedBox(height: 20),
RaisedButton(
child: Text('点击'),
onPressed: () {
setState(() {
this.count++;
});
},
)
],
),
),
);
}
}
效果
2 新增数据 List
import 'package:flutter/material.dart';
import 'res/listData.dart';
void main() {
runApp(new MyApp());
}
// 自定义组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
// Scaffold 定义导航头部和页面主要内容
home: Scaffold(
appBar: AppBar(
title: Text('flutter 标题'),
),
body: HomePage(),
),
theme: ThemeData(
primarySwatch: Colors.green,
),
);
}
}
class HomePage extends StatefulWidget {
// StatefulWidget 是一个抽象类
HomePage({Key key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState(); // 实现抽象方法 createState
}
class _HomePageState extends State<HomePage> {
// 继承 State 类
List list = new List();
@override
Widget build(BuildContext context) {
return Container(
child: Container(
height: 300,
width: 300,
color: Colors.pink,
child: Column(
children: <Widget>[
Column(
children:
this.list.map((e) => Chip(label: Text("${e}"))).toList(),
),
SizedBox(height: 20),
RaisedButton(
child: Text('点击'),
onPressed: () {
setState(() {
this.list.add('点击新增一条数据');
});
},
)
],
),
),
);
}
}
效果
网友评论