目录
查看版本
组件
组件源码学习
做个基金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
@override
Widget 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);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: '安远基金',
debugShowCheckedModeBanner: false,
home: AnyuanFundsHome(),
);
}
}
class AnyuanFundsHome extends StatelessWidget {
const AnyuanFundsHome({Key? key}):super(key:key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('债基投资明细'),
) ,
body: const AnyuanFundsBody(),
);
}
}
class AnyuanFundsBody extends StatelessWidget {
const AnyuanFundsBody({Key? key}):super(key: key);
@override
Widget 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);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: '安远基金',
debugShowCheckedModeBanner: false,
home: AnyuanFundsHome(),
);
}
}
class AnyuanFundsHome extends StatelessWidget {
const AnyuanFundsHome({Key? key}):super(key:key);
@override
Widget 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);
@override
Widget 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;
@override
Widget 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);
@override
Widget 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);
@override
Widget 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);
@override
Widget 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('****')),
],
),
);
}
}
