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

安远鹿江

已于 2024-06-28 12:54:19 修改

阅读量493

点赞数 5

分类专栏： Flutter 文章标签： flutter 前端

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

本文链接：https://blog.csdn.net/simazhao/article/details/140036360

版权

Flutter 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

查看版本

组件

组件的本质就是个类。

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('****')),
        ],
      ),
    );
  }
}