写一个flutter程序2

news2024/9/20 19:31:51

需求

  • 完成一个简单的移动应用程序，功能是：为一个创业公司生成建议的名称。用户可以选择和取消选择的名称、保存（收藏）喜欢的名称。
  • 该代码一次生成十个名称，当用户滚动时，会生成一新批名称。
  • 用户可以点击导航栏右边的列表图标，以打开到仅列出收藏名称的新页面（route）。

这一部分，我们来写一下交互和打开新的页面

向列表里添加图标

将lib/main.dart的代码替换

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main(List<String> args) {
  runApp(const MyApp());  
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Startup Name Generator'),
          ),
          body: Center(
            child: RandomWords(),
          ),
        ),
    );
  }
}

class RandomWords  extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  //保存建议的单词对
  final List<WordPair> _suggesttions = <WordPair>[]; 
  // 这个集合存储用户喜欢的单词对。Set中不允许重复的值
  final Set<WordPair> _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context,i) {
        if(i.isOdd) return const Divider();
        final index = i~/2;
        if(index >= _suggesttions.length){
          _suggesttions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggesttions[index]);
      },
    );
  }
  Widget _buildRow(WordPair pair){
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved?Icons.favorite:Icons.favorite_border,
        color: alreadySaved?Colors.red:null,
      ),
    );
  }
}

我们添加了一个函数用来展示列表的每行
可以看到效果如下
在这里插入图片描述

添加交互

下面我们给点击添加效果，这部分就是调用setState()通知框架状态已经改变

在Flutter的响应式风格的框架中，调用setState()会为State对象出发build()方法，从而导致对UI的更新。

将lib/main.dart代码更新为

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main(List<String> args) {
  runApp(const MyApp());  
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'Startup Name Generator',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Startup Name Generator'),
          ),
          body: Center(
            child: RandomWords(),
          ),
        ),
    );
  }
}

class RandomWords  extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  //保存建议的单词对
  final List<WordPair> _suggesttions = <WordPair>[]; 
  // 这个集合存储用户喜欢的单词对。Set中不允许重复的值
  final Set<WordPair> _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context,i) {
        if(i.isOdd) return const Divider();
        final index = i~/2;
        if(index >= _suggesttions.length){
          _suggesttions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggesttions[index]);
      },
    );
  }
  Widget _buildRow(WordPair pair){
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved?Icons.favorite:Icons.favorite_border,
        color: alreadySaved?Colors.red:null,
      ),
      onTap:(){
        setState(() {
          if(alreadySaved){
            _saved.remove(pair);
          }else{
            _saved.add(pair);
          }
        });
    }
    );

  }
}

在这里插入图片描述

导航到新页面

替换掉lib/main.dart中的内容

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

void main(List<String> args) {
  runApp(const MyApp());  
}

class MyApp extends StatelessWidget{
  const MyApp({super.key});
  
  @override
  Widget build(BuildContext context){
    return const MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords()
    );
  }
}

class RandomWords  extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  //保存建议的单词对
  final List<WordPair> _suggesttions = <WordPair>[]; 
  // 这个集合存储用户喜欢的单词对。Set中不允许重复的值
  final Set<WordPair> _saved = Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Startup Name Generator'),
          actions: <Widget>[
             IconButton(onPressed: _pushSaved, icon: const Icon(Icons.list))
          ],
          ),
          body: _buildSuggestions(),
        );

  }
  Widget _buildSuggestions(){
    return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context,i) {
        if(i.isOdd) return const Divider();
        final index = i~/2;
        if(index >= _suggesttions.length){
          _suggesttions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggesttions[index]);
      },
    );
  }
  Widget _buildRow(WordPair pair){
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: Icon(
        alreadySaved?Icons.favorite:Icons.favorite_border,
        color: alreadySaved?Colors.red:null,
      ),
      onTap:(){
        setState(() {
          if(alreadySaved){
            _saved.remove(pair);
          }else{
            _saved.add(pair);
          }
        });
    }
    );

  }
  void _pushSaved(){
    Navigator.of(context).push(
      MaterialPageRoute<void>(
        builder: (BuildContext context){
          final Iterable<ListTile> tiles = _saved.map((WordPair pair) {
            return ListTile(
              title: Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          });
          final List<Widget> divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();
          return Scaffold(
            appBar: AppBar(
              title: const Text('Saved Suggestions'),
            ),
            body: ListView(children: divided),
          );
        },
      ),
    );
  }
}

我们在appBar那行增加一个IconButton图表，当用户点击列表图表的时候，包含收藏夹的新路由页面入栈显示
给onPressed绑定一个_pushSaved函数
因为我们需要在_RandomWordsState类中使用函数，所以将return 的ListView抽象成一个函数
在_pushSaved中
添加 Navigator.push 调用，这会使路由入栈（以后路由入栈均指推入到导航管理器的栈）
添加MaterialPageRoute ，新页面的内容会在MaterialPageRoute的build属性中构建
在这里插入图片描述

使用Themes修改UI

通过ThemeData类更改应用程序的主题
将类MyApp中的代码替换

class MyApp extends StatelessWidget{
  const MyApp({super.key});
  

  
  @override
  Widget build(BuildContext context){
    return  MaterialApp(
      title: 'Startup Name Generator',
      theme: ThemeData(
              colorScheme: const ColorScheme.light(
                  primary: Colors.orange,
                  onPrimary: Colors.white,
                  onBackground: Colors.white,
                  secondary: Colors.amber),
            ),
      home: RandomWords()
    );
  }
}

这里注意单独使用theme:ThemeData(primaryColor: Colors.red),是无效的
需要设置主题中的 colorScheme属性
这里使用ColorScheme.light

theme: ThemeData(
              colorScheme: const ColorScheme.light(
                  primary: Colors.orange,
                  onPrimary: Colors.white,
                  onBackground: Colors.white,
                  secondary: Colors.amber),
            ),

在这里插入图片描述

至此完成了一个可运行在 Android 和 iOS 系统上的、包含交互的 Flutter 应用，在这个 项目里，你已经做了下面的事情：

  • 写了 Dart 代码
  • 使用热重载加速了开发进程
  • 实现了一个 stateful widget，为你的应用加入了交互功能
  • 创建了一个新的页面（route），为主页和这个新页面的跳转加入了逻辑
  • 学会了如何使用 themes 修改应用的 UI

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/61981.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

利用通信基础设施提高电网的稳态稳定性(Matlab代码实现）

利用通信基础设施提高电网的稳态稳定性(Matlab代码实现）

目录 1 概述 2 稳态稳定性分析 2.1 系统模型 2.2 稳态稳定性 2.3 问题说明 3 仿真结果 4 MAtlab代码 1 概述 随着电力系统的复杂性和规模的增加&#xff0c;电力系统的有效控制变得越来越困难。我们提出了一种自动控制策略&#xff0c;该策略基于通过通信基础设施获得的…
阅读更多...
从0搭建前端脚手架详解（小白也可以搭建）

从0搭建前端脚手架详解（小白也可以搭建）

本篇文章用来为大家提供一个搭建简易前端脚手架的思路。 先来看一眼实现的效果。 从图上来看这个脚手架的功能非常的简单只有一个创建的命令&#xff0c;其他都是帮助和显示版本号的。 也就是上图这句&#xff0c;创建一个新项目&#xff0c;只需要输入create 项目名便可使用&…
阅读更多...
[附源码]计算机毕业设计大学生心理测评系统

[附源码]计算机毕业设计大学生心理测评系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
MATLAB学习笔记（系统学习）

MATLAB学习笔记（系统学习）

教程来源&#xff1a; 1.MATLAB教程&#xff1a;https://www.cainiaojc.com/matlab/matlab-tutorial.html 不断学习补充中~~~ 文章目录一、MATLAB基础二、MATLAB科研绘图&#xff08;重点在于修改参数&#xff0c;优化图片&#xff09;一、MATLAB基础 1.在MATLAB中使用分号&a…
阅读更多...
免费网课查题接口

免费网课查题接口

免费网课查题接口 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&#xff08;点击跳…
阅读更多...
Java并发编程学习14-任务关闭（上）

Java并发编程学习14-任务关闭（上）

任务关闭&#xff08;上&#xff09;-- 关闭基于线程的服务 《任务关闭》由于篇幅较多&#xff0c;拆分了两篇来介绍各种任务和服务的关闭机制&#xff0c;以及如何编写任务和服务&#xff0c;使它们能够优雅地处理关闭。 我们知道&#xff0c;应用程序通常会创建拥有多个线…
阅读更多...
微服务框架 SpringCloud微服务架构 10 使用Docker 10.9 数据卷挂载案例2

微服务框架 SpringCloud微服务架构 10 使用Docker 10.9 数据卷挂载案例2

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构10 使用Docker10.9 数据卷挂载案例210.9.1 直接开干10.9.2 数据卷挂载的方…
阅读更多...
[附源码]Python计算机毕业设计Django设备运维平台出入库模块APP

[附源码]Python计算机毕业设计Django设备运维平台出入库模块APP

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
动态数据增强及构造方案解决

动态数据增强及构造方案解决

前言 随着数据量的增长以及业务的调整变更&#xff0c;我们需要选择合适的技术及存储引擎对数据进行归类&#xff0c;调整&#xff0c;达到高并发、秒响应、低延迟及可扩展对现有程序的改造升级问题&现状 任务重&#xff0c;时间紧&#xff0c;人力不足&#xff0c;不能够…
阅读更多...
[附源码]计算机毕业设计基于SpringBoot的玉石交易系统

[附源码]计算机毕业设计基于SpringBoot的玉石交易系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
源码深度剖析Spring Bean标签的解析及注册

源码深度剖析Spring Bean标签的解析及注册

在博客《一步一步带你深入源码看Spring是如何加载XML配置文件的》中把Spring对XML配置文件如何加载的说明白了&#xff0c;XML配置文件加载完成后就是对标签的解析&#xff0c;本篇博客就是针对Spring bean 标签的解析以及bean definition 的注册。 Spring 中的标签包括默认标…
阅读更多...
Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

Dreamweaver网页设计与制作100例 餐饮主题简洁日式料理餐饮网页设计(4页)HTML+CSS+JavaScript

&#x1f380; 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…
阅读更多...
[附源码]计算机毕业设计点餐系统

[附源码]计算机毕业设计点餐系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
音视频技术开发周刊 | 274

音视频技术开发周刊 | 274

每周一期&#xff0c;纵览音视频技术领域的干货。新闻投稿&#xff1a;contributelivevideostack.com。「紧急通知」LiveVideoStackCon 2022 音视频技术大会北京站改期各位LVSer们&#xff1a;因疫情影响&#xff0c;北京近期不再允许举办大型线下活动&#xff0c;我们无奈且抱…
阅读更多...
【消息中间件】为什么选择RocketMQ及使用案例

【消息中间件】为什么选择RocketMQ及使用案例

目录 一、为什么选择RocketMQ 1、为什么是为什么选择RocketMQ 2、RocketMQ、ActiveMQ和Kafka之间的比较 2.1、对比1 2.2、对比2&#xff0c;接着上表 二、使用案例 1、引入依赖 2、编写启动类 3、编写application.yml配置文件 4、创建rocketmq文件夹 4.1、创建生产者…
阅读更多...
OpenCV实战（4）——像素操作

OpenCV实战（4）——像素操作

OpenCV实战&#xff08;4&#xff09;——像素操作0. 前言1. 图像的基本组成2. 访问像素值2.1 修改图像像素2.2 cv::Mat_ 模板类2.3 完整代码示例3. 用指针扫描图像3.1 图像扫描3.2 其他减色公式3.3 使用输入和输出参数3.4 高效扫描连续图像3.5 低阶指针算法4. 使用迭代器扫描图…
阅读更多...
linux操作系统期末考试题库

linux操作系统期末考试题库

1. cal命令 目录 1. cal命令 2.cat命令 3.cd命令 4.date命令 5.echo命令 6.grep命令 7.head 命令 8.ls 命令 9.touch 命令 10.more命令 11. ln创建链接命令 12.查看进程 13.mkdir命令 cal -3 cal 查看指定日期的日历 cal 4 2022 cal 2018 2.cat命令 cat -n /etc…
阅读更多...
认识MyBatis

认识MyBatis

MyBatis是什么&#xff1f; MyBatis是dao层&#xff08;持久层&#xff09;框架&#xff0c;它支持自定义SQL、存储过程以及高级映射。 MyBatis 免除了几乎所有的JDBC代码以及设置参数和获取结果集的工作。MyBatis 可以通过简单的XML或注解来配置和映射原始类型、接口和Java …
阅读更多...
2022 NCTF

2022 NCTF

MISC 炉边聚会 卡组代码是 Base64 编码的字节串&#xff0c;exp <?php $deckstring "AAEDAZoFKIwGngXIBrwFzgnQBfIHygf0CIgJkAiBogJ1gjMCPIHtgeeBeAD6AfyB7YHvgbgAAD4AO2B7wFkgnMCMwIga2B/QImgi6BJAIiAn2BOIJAAA"; #这是⼀个⾮常有趣的萨满卡组 $binary bas…
阅读更多...
非零基础自学Golang 2 开发环境 2.2 配置GOPATH

非零基础自学Golang 2 开发环境 2.2 配置GOPATH

非零基础自学Golang 学习文档地址&#xff1a;https://www.topgoer.cn/ 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删【已联系过文档作者】 文章目录非零基础自学Golang2 开发环境2.2 配置GOPATH2.2.1 配置GOPATH2.2.2 go的项目目录2.2.3 适合个人开发…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023