当前位置： 首页 > news >正文

写一个flutter程序2

news 来源：原创 2024/5/2 11:14:23

需求

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

相关文章：

  • NLP 笔记：TF-IDF
  • Linux 根据提交记录生成补丁及新旧文件对比
  • Linux下网络编程-基于多任务的简易并发服务器
  • Kafka 2.13-3.7.0 在 Windows 上的安装与配置指南
  • 文件上传复习（upload-labs18-19关）
  • user_account, user_info, user_work_flow表设计使用外键还是主键保持一致？
  • vmware中Numlock和caplock一直闪烁（更新时间24/2/28）
  • 睿易售前初级认证课程R4.1-Z系列防火墙-2023练习题答案
  • 请求包的大小会影响Redis每秒处理请求数量
  • 数据结构·顺序表实现通讯录
  • 【virtual Box】功能速通：安装 Windows 和 Ubuntu
  • kafka平滑升级过程指导
  • 给定一个数组arr，长度为N且每个值都是正数，代表N个人的体重。再给定一个正数 limit，代表一艘船的载重。
  • 【大道模式】状态模式 - State Pattern(审核状态流转)
  • 协议-序列化-http-Cookie-Session-https
  • 数据结构—Map集合
  • SpringMVC对消息转换器的处理相关
  • Linux-文件压缩解压
  • [附源码]计算机毕业设计JAVA医药管理系统
  • [附源码]计算机毕业设计基于SpringBoot+Vue的健身房会员系统的设计与实现
  • 9 特色聚类
  • python中的集合详解
  • pringboot面向爱宠人群的宠物资讯系统36as8计算机毕业设计-课程设计-期末作业-毕设程序代做
  • Flink系列之Flink中StateBackend深入剖析和应用
  • Java可变参数和集合工具类Collections的详细介绍
  • 网站构建初级教程
  • 项目管理逻辑:老板为什么赔钱的项目也做?为什么害怕你闲着?
  • Spring Boot 框架整合 MyBatis 连接数据库，详细说明
  • MySQL主从同步
  • 微服务自动化【Docker-Compose】
  • 在Postgres中分页的五种方法，从基本到异国情调
  • 工作经历分享