Flutter循序渐进==＞基金管理APP首页

原创

已于 2024-06-28 12:54:19 修改 · 571 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #前端

于 2024-06-28 11:57:17 首次发布

查看版本

组件

组件的本质就是个类。

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 cont