Flutter-完整开发实战详解(Dart-语言和-Flutter-基础)
由于篇幅限制,这里只展示如何在Flutter中创建一个简单的计数器应用程序的核心部分。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CounterPage(),
);
}
}
class CounterPage extends StatefulWidget {
@override
_CounterPageState createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('计数器'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'点击次数:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: '增加',
child: Icon(Icons.add),
),
);
}
}
这段代码展示了如何在Flutter中创建一个有状态的Widget,用于维护计数状态,并且有一个用于增加计数的FloatingActionButton。当用户点击按钮时,_incrementCounter
函数被调用,通过setState
更新计数并重新构建UI。这是学习Flutter的一个基本例子,展示了其响应式和声明式的UI构建方法。
评论已关闭