首页 > 其他分享 >flutter 尝试创建第一个页面(三)

flutter 尝试创建第一个页面(三)

时间:2024-04-16 23:35:23浏览次数:18  
标签:尝试 assets Icons Text title Icon flutter 页面

新建目录 assets  存放图片

在pubspec..yaml 中添加

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
      - assets/阿尼亚.jpg
      - assets/可可爱爱阿尼亚.jpg

在 目录 lib  main.dart文件中添加以下代码

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // 每个项目最外层,必须有MaterialApp
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '心语航标',
      theme: ThemeData(

        primarySwatch: Colors.purple,
      ),
      // 通过Home 指定首页
      home: MyHome(),
    );
  }
}

class MyHome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // 在flutter 中 ,每个控件都是一个类
    return Scaffold(
      appBar: AppBar(
        title: Text("心语航标"),
        centerTitle: true,
        //右侧行为按钮
        actions:<Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {},
          )
        ],
      ),

      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.all(0),
          children:const <Widget>[
            UserAccountsDrawerHeader(
              accountEmail: Text('[email protected]'),
              accountName: Text('阿尼亚'),
              currentAccountPicture: CircleAvatar(
                backgroundImage:AssetImage('assets/阿尼亚.jpg') ,),
              //美化当前控件的
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/可可爱爱阿尼亚.jpg'),
                    fit: BoxFit.cover, // 可选的,根据需要设置图片的适应方式
                  ),
                )
            ),
            ListTile(title:Text('用户反馈'),trailing: Icon(Icons.feedback),),
            ListTile(title:Text('系统设置'),trailing: Icon(Icons.settings),),
            ListTile(title:Text('我要发布'),trailing: Icon(Icons.send),),
            ListTile(title:Text('注销'),trailing: Icon(Icons.exit_to_app),)
          ],
        ),
      ),

      
    );
  }
}

显示效果

 

标签:尝试,assets,Icons,Text,title,Icon,flutter,页面
From: https://www.cnblogs.com/youxiandechilun/p/18139539

相关文章

  • flutter 环境搭配 (一)
    首先下载flutterSDKFlutter中文网官网(p2hp.com 选择下载SDK解压后,添加到环境变量中。 配置国内镜像,PUB_HOSTED_URL=https://pub.flutter-io.cnFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 接下来配置androidstudio  最后在终端输入flutte......
  • 实现不登录无法进入主页面的功能
    service.interceptors.response.use(res=>{console.log('---响应拦截器---',res)//未设置状态码则默认成功状态constcode=res.data.code;//获取错误信息constmsg=res.data.msgconsole.log('---code---',code)if(r......
  • LayUI弹窗确定后获取子页面的值(如获取UEditor富文本的内容,或input标签内容)
    LayUI弹窗确定后获取子页面的值(如获取UEditor富文本的内容,或input标签内容)子窗体JS代码<scriptsrc="~/lib/ueditor-1.4.3.3/ueditor.config.js"></script><scriptsrc="~/lib/ueditor-1.4.3.3/ueditor.all.js"></script><script>varue=UE.......
  • uniapp小程序页面实现元素与胶囊进行居中对齐
    无论是否为uni,关键在于获取胶囊中点的位置,如果是原生小程序根据小程序文档获取,其余逻辑处理是一致的代码语法都只是技术选择,重点是逻辑处理,对于技术的运用,代码技术好比是积木,好的程序就是好的组合代码,利用技术的特点进行组合,1.效果实现代码fixedTop(){lets......
  • 纯前端实现发版版本变化后页面重新加载
    0.原理通过在前端静态文件目录下维护一个版本,首次进入页面存储当前版本,轮询查询静态文件版本是否发生变化,如果变化则重新加载页面,如果未变化,则继续轮询1.优点比通过后端维护在数据库版本进行查询消耗更小,不需要查询数据库,也不用走到后台代码层,只需要访问到ngxin/......
  • 老年手机打电话页面
    1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。2、利用网络资源自学Mockplus或墨刀等原型设计工具,并利用原型工具自拟主题进行原型设计。主题是老年手机打电话页面要求:1)对主题名称、功能、界面设计考虑因素等进行说明;2)每位同学提供至少四......
  • HarmonyOS NEXT应用开发案例——滑动页面信息隐藏与组件位移效果
    介绍在很多应用中,向上滑动"我的"页面,页面顶部会有如下变化效果:一部分信息逐渐隐藏,另一部分信息逐渐显示,同时一些组件会进行缩放或者位置移动。向下滑动时则相反。效果图预览使用说明向上滑动页面,出现如下变化:用户名/选择身份/设置图标/客服图标逐渐隐藏,用户头像尺寸逐渐缩小......
  • HarmonyOS NEXT应用开发案例——全屏登录页面
    全屏登录页面介绍本例介绍各种应用登录页面。全屏登录页面:在主页面点击跳转到全屏登录页后,显示全屏模态页面,全屏模态页面从下方滑出并覆盖整个屏幕,模态页面内容自定义,此处分为默认一键登录方式和其他登录方式。效果图预览使用说明点击主页面按钮"点击跳转到全屏登录页",......
  • HarmonyOS NEXT应用开发——Navigation开发 页面切换场景范例
    简介在应用开发时,我们常常遇到,需要在应用内多页面跳转场景时中使用Navigation导航组件做统一的页面跳转管理,它提供了一系列属性方法来设置页面的标题栏、工具栏以及菜单栏的各种展示样式。除此之外还拥有动态加载,navPathStack路由跳转。本文就以Navigation页面切换范例为例,来展......
  • HarmonyOS-基础之页面跳转
    1、配置页面路由信息resources-->base-->profile-->main_pages.json{"src":["pages/demo03/Index","pages/demo03/Detail"]}2、编写页面组件Index.ets/***路由跳转*-使用鸿蒙内置的router*/importrouterfrom'......