[Flutter学习一]Flutter理解

最新推荐文章于 2025-06-29 10:44:55 发布

zq_Hero

最新推荐文章于 2025-06-29 10:44:55 发布

阅读量949

点赞数

CC 4.0 BY-SA版权

分类专栏： [Flutter]

本文链接：https://blog.csdn.net/u013233097/article/details/100179038

[Flutter] 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了Flutter的跨平台特性，包括支持的平台、UI设计原则、高性能表现及游戏开发潜力。详细介绍了Widget作为基本构建单元的角色，区分了有状态和无状态组件，并提供了实例代码，展示了如何创建和管理组件状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,flutter的理解：

跨平台性:目前至少夸五中平台。Mac,Android,Windows,Linux,Ios。
UI:使用了大量的 Material Design和Cupertino风格组件。
60fps超高性能，完全可以胜任游戏的制作。

2，一切皆为组件：Widget 是Flutter用户程序构建的基本构建块。按钮，输入框，卡片，动画，手势都可以视为Widget。

有状态组件：是界面状态会发生变化的组件。
无状态组件：即界面不发生变化的组件。

在这里插入图片描述

3,构建一个Widget:
需要重写 Widget 的build方法来构建一个组件:
@protected Widget build(BuildContext context)

State:一个Widget的状态。即一个需要改变状态的Widget需要通过setState来改变数据值。并通知框架更新界面。
同React中的状态概念一致。
在这里插入图片描述

4，无状态组件和有状态组件：

定义一个无状态组件：

//=======myApp 不做状态处理  所以是无状态的====无状态 组件========
 class MyApp extends StatelessWidget {
   //继承的  方法：
   @override
   Widget build(BuildContext context) {
     final String title = "flutterDemo";
     var app = new MaterialApp(
         theme: ThemeData(
           brightness: Brightness.light, //使用亮色 主体
           primaryColor: Colors.lightGreen[800],
           accentColor: Colors.orange[800], //前景色  文本按钮颜色
         ), // app主题样式
         home: new MyHomePage(
           title: title,
         ));
     return app;
   }
 }

定义一个有状态组件：

//有状态  需要变化   继承自 StatefulWidget
 class MyHomePage1 extends StatefulWidget {
   final String title;
   const MyHomePage1({Key key, this.title}) : super(key: key);
   @override
   State<StatefulWidget> createState() => new _MyHomePageState();
 }
 //必须 继承 State类      注意后面的  泛型应该为  widget组件
 class _MyHomePageState extends State<MyHomePage1> {
   int counter = 0;
   @override
   Widget build(BuildContext context) {
     // TODO: implement build
     var homPage = new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       //居中布局
       body: new Center(
         //垂直布局
         child: new Column(
           //主轴   居中对齐
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             new Text('要展示的state:', style: Theme.of(context).textTheme.display1),
             new Text(
               "counter=" + "$counter",
               style: Theme.of(context).textTheme.display1,
             )
           ],
         ),
       ),
       floatingActionButton: new FloatingActionButton(
         onPressed: () => {
           setState(() {
             counter++;
           }), //方法  用于更改数据状态
         },
         tooltip: "Increment",
         child: new Icon(Icons.add),
       ),
     );
     return homPage;
   }
 }

个人理解：flutter 确实和React很像。 State 的作用和 Java中变量有有些相似。