采用Flutter开发的APP用户体验不会让你失望
warning:
这篇文章距离上次修改已过187天,其中的内容可能已经有所变动。
以下是一个简单的Flutter应用程序示例,它展示了如何使用Flutter创建一个包含文本和按钮的基本界面,并响应按钮点击事件。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
这段代码定义了一个名为MyApp
的基础应用程序,它有一个名为HomePage
的状态ful widget,该widget包含一个可增加计数器值的按钮和显示当前计数器值的文本。通过使用setState
方法,每次按钮被按下时,计数器的值都会增加,并且界面会相应地更新。这个简单的例子展示了Flutter应用程序的基本构建块,并演示了如何管理状态和响应用户交互。
评论已关闭