写一个flutter程序2

news/2024/7/24 3:13:44 标签: flutter, android

需求

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

相关文章

OpenCV入门（C++/Python）-使用OpenCV裁剪图像（四）

OpenCV入门（C++/Python）-使用OpenCV裁剪图像（四）

裁剪是为了从图像中删除所有不需要的物体或区域。甚至突出显示图像的特定功能。 使用OpenCV裁剪没有特定的功能&#xff0c;NumPy数组切片是工作。读取的每个图像都存储在2D数组中&#xff08;对于每个颜色通道&#xff09;。只需指定要裁剪区域的高度和宽度&#xff08;以像素…
阅读更多...
家政小程序开发，改变传统难题

家政小程序开发，改变传统难题

首先来说说家政小程序的优势&#xff1a;过去家政门店是根据四处贴到广告宣传、发传单、亲朋好友推 荐等方法处于被动等候顾客上门服务&#xff0c;拓客高效率较低&#xff0c;而且 服务销售市场还存有混乱市场竞争、供求不平衡、员工行为规范参差不齐等难题&#xff0c;限定了…
阅读更多...
【GD32F427开发板试用】IAR flash loader 下载GD32F427流程简要分析

【GD32F427开发板试用】IAR flash loader 下载GD32F427流程简要分析

本篇文章来自极术社区与兆易创新组织的GD32F427开发板评测活动&#xff0c;更多开发板试用活动请关注极术社区网站。作者&#xff1a;andeyqi 很高兴获的社区的GD32F427开发板的评测机会&#xff0c;这几年芯片慌大家都能感受到&#xff0c;项目上经常因为货源紧张不断更换替代…
阅读更多...
如何用 7 分钟击破 Serverless 落地难点？

如何用 7 分钟击破 Serverless 落地难点？

当前&#xff0c;Serverless 覆盖的技术场景正在不断变广。Serverless 已在微服务、在线应用、事件驱动、任务处理等众多场景被验证且广泛应用 。当你想要部署一个网站时&#xff0c;需要自己购买服务器并花费时间去维护&#xff0c;造成资源浪费不说&#xff0c;还要耗费精力。…
阅读更多...
通信基础之天线知识梳理---2022/12/05

通信基础之天线知识梳理---2022/12/05

天线知识梳理基本振子的辐射和天线电参数天线阵常用线天线天线测量声明&#xff1a; 学习资料来源于慕课。 哈工大的天线原理课程 基本振子的辐射和天线电参数 天线电参数主要有&#xff1a; 方向性函数、方向图、方向性系数、辐射电阻、效率、增益、输入阻抗、频带、极化。 天…
阅读更多...
【LeetCode】最大连续 1 的个数

【LeetCode】最大连续 1 的个数

485. 最大连续 1 的个数 给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 输入&#xff1a;nums [1,1,0,1,1,1] 输出&#xff1a;3 解释&#xff1a;开头的两位和最后的三位都是连续 1 &#xff0c;所以最大连续 1 的个数是 3. 示例 2: 输入&#xff1a;n…
阅读更多...
Python学习笔记 - 异常处理

Python学习笔记 - 异常处理

前言 为了增强程序的健壮性&#xff0c;计算机程序的编写也需要考虑如何处理一些异常的情况&#xff0c;Python 语言提供了异常处理功能&#xff0c;本博文主要介绍 Python 异常处理机制。 一 异常处理举例 为了学习 Python 异常处理机制&#xff0c;首先看下面进行除法运算的…
阅读更多...
08【C语言 趣味算法】再识：冒泡排序（问题分析、算法设计与分析、程序流程图以及完整代码）

08【C语言 趣味算法】再识：冒泡排序（问题分析、算法设计与分析、程序流程图以及完整代码）

Contents 一、前情回顾二、New Problem：冒泡排序（bubble sort）2.1 问题描述2.2 Analysis of the problem（问题分析）、算法思想2.3 Algorithm design（算法设计）2.4 程序流程图，完整code 以及 输出2.5 附：Question expansion（问题拓展）：Select Sort（选择排序）一、前…
阅读更多...
最新文章

Copyright @ 2022~2023