目录

查看版本

组件

组件源码学习

做个基金APP首页源代码

效果

---

查看版本

组件

组件的本质就是个类。

import 'package:flutter/material.dart';void main() {runApp(const OurFirstApp(),);
}
OurFirstApp()实例化，就是给runApp用的，runApp就是运行实例化的类OurFirstApp。该类又继承了StatelessWidget。 extends就是继承的意思class OurFirstApp extends StatelessWidget {const OurFirstApp({Key? key}) : super(key:key);build（）传递对象context，返回Center widget@overrideWidget build(BuildContext context) {return Center(child: Container(margin: const EdgeInsets.all(5),child: const Text('贪多嚼不烂，心平气和的一行一行的敲代码！',textDirection: TextDirection.ltr,  widget Text有个命名参数textDirection规定文字方向。
)));}
}

组件源码学习

还有什么比组件源码更好的教材？上面红框的内容，第一项为类型，？可以为空，data表示关键字功能。

做个基金APP首页源代码

import 'package:flutter/material.dart';void main() {runApp(const MyFundsApp(),);
}class MyFundsApp extends StatelessWidget {const MyFundsApp({Key? key}) : super(key:key);@overrideWidget build(BuildContext context) {return const MaterialApp(title: '安远基金',debugShowCheckedModeBanner: false,home: AnyuanFundsHome(),);}
}class AnyuanFundsHome extends StatelessWidget {const AnyuanFundsHome({Key? key}):super(key:key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('债基投资明细'),) ,body: const AnyuanFundsBody(),);}
}class AnyuanFundsBody extends StatelessWidget {const AnyuanFundsBody({Key? key}):super(key: key);@overrideWidget build(BuildContext context) {return Column(children: [Center(child: Row(children: [Container(padding: const EdgeInsets.all(10),child: const Text('ID',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('名称',textAlign: TextAlign.left,),),const Expanded(child: Text('投资金额',textAlign: TextAlign.center,)),Container(padding: const EdgeInsets.all(10),child: const Text('收益',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('星级',textAlign: TextAlign.left,),),],),),Center(child: Row(children: [Container(padding: const EdgeInsets.all(10),child: const Text('006961',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('南方中债7-10年指数A',textAlign: TextAlign.left,),),const Expanded(child: Text('22000',textAlign: TextAlign.center,)),Container(padding: const EdgeInsets.all(10),child: const Text('186.02',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('*****',textAlign: TextAlign.left,),),],),),Center(child: Row(children: [Container(padding: const EdgeInsets.all(10),child: const Text('006493',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('南方中债3-5年指数A',textAlign: TextAlign.left,),),const Expanded(child: Text('3500',textAlign: TextAlign.center,)),Container(padding: const EdgeInsets.all(10),child: const Text('32.93',textAlign: TextAlign.left,),),Container(padding: const EdgeInsets.all(10),child: const Text('****',textAlign: TextAlign.left,),),],),),],);}}

效果

换种模块化思维

效果图

import 'package:flutter/material.dart';void main() {runApp(const MyFundsApp(),);
}class MyFundsApp extends StatelessWidget {const MyFundsApp({Key? key}) : super(key:key);@overrideWidget build(BuildContext context) {return const MaterialApp(title: '安远基金',debugShowCheckedModeBanner: false,home: AnyuanFundsHome(),);}
}class AnyuanFundsHome extends StatelessWidget {const AnyuanFundsHome({Key? key}):super(key:key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('债基投资明细'),backgroundColor: Colors.blueAccent,) ,body: const AnyuanFundsBody(),);}
}class AnyuanFundsBody extends StatelessWidget {const AnyuanFundsBody({Key? key}):super(key: key);@overrideWidget build(BuildContext context) {return Column(children: const [RowOne(),RowTwo(),RowThree(),],);}
}class ModelContainer extends StatelessWidget {const ModelContainer({Key? key, required this.modelText,}): super(key: key);final Text modelText;@overrideWidget build(BuildContext context) {return Container(padding: const EdgeInsets.all(10),color: Colors.amberAccent,child: modelText,);}
}class RowOne extends StatelessWidget {const RowOne({Key? key,}): super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Row(children: const [ModelContainer(modelText: Text('ID')),ModelContainer(modelText: Text('名称')),ModelContainer(modelText: Text('投资金额')),ModelContainer(modelText: Text('收益')),ModelContainer(modelText: Text('星级')),],),);}
}class RowTwo extends StatelessWidget {const RowTwo({Key? key,}): super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Row(children: const [ModelContainer(modelText: Text('006961')),ModelContainer(modelText: Text('中债7-10')),ModelContainer(modelText: Text('22000')),ModelContainer(modelText: Text('186.02')),ModelContainer(modelText: Text('*****')),],),);}
}class RowThree extends StatelessWidget {const RowThree({Key? key,}): super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Row(children: const [ModelContainer(modelText: Text('006493')),ModelContainer(modelText: Text('中债3-5')),ModelContainer(modelText: Text('3500')),ModelContainer(modelText: Text('32.93')),ModelContainer(modelText: Text('****')),],),);}
}