在Flutter中，有一些基本概念和常用的命名约定，这里我将列举一些关键点并给出简单的示例代码。
- 状态管理：Flutter使用
StatefulWidget来维护状态，每当状态发生变化时，可以使用setState方法来更新UI。
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int counter = 0;
void increment() {
setState(() {
counter++;
});
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
RaisedButton(
onPressed: increment,
child: Text('Increment'),
),
Text('$counter'),
],
);
}
}
- 组件化：Flutter鼓励将UI分解成小的、可重用的组件。
class CustomButton extends StatelessWidget {
final String label;
final VoidCallback onPressed;
const CustomButton({Key key, this.label, this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return RaisedButton(
onPressed: onPressed,
child: Text(label),
);
}
}
- 布局构建：Flutter使用
Widget树的概念来构建UI。
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Text('Top'),
Expanded(
child: FittedBox(
fit: BoxFit.contain,
child: Column(
children: <Widget>[
Text('Left'),
Text('Right'),
],
),
),
),
Text('Bottom'),
],
);
}
- 样式和主题：Flutter使用
Theme来定义应用的样式和颜色主题。
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
- 命名约定：Flutter中的类和变量名通常使用
camelCase，类名以大写字母开头，使用_前缀为私有变量或方法。
class MyHomePage extends StatefulWidget {
final String title;
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(