Flutter基础八：路由navigator,Flutter 代码片断,Container,Scaffold,Center,FlatButton，Stack，aspectRatio，Image

最新推荐文章于 2022-10-18 10:19:34 发布
最新推荐文章于 2022-10-18 10:19:34 发布
阅读量219 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27597629/article/details/108695822
版权

文章目录

VS Code：Flutter 代码片断

安装Awesome Flutter Snippets，可以用代码片段快速书写代码。

在这里插入图片描述

打开新页面并返回（push 与 pop）

import 'package:flutter/material.dart';

class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(
              onPressed: null,
              child: Text('Home'),
            ),
            FlatButton(
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                      builder: (BuildContext context) => Page(title: 'About')),
                );
              },
              child: Text('About'),
            ),
          ],
        ),
      ),
    );
  }
}

class Page extends StatelessWidget {
  final String title;
  Page({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0.0,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          }),
          
    );
    
  }
}

在这里插入图片描述
在这里插入图片描述

带名字的路由（ Navigator.pushNamed)

'/about’的/表示路由的根或者初始路由，就是默认要显示的东西。
main.dart

import 'package:flutter/material.dart';
import 'demo/listview_demo.dart';
import 'demo/drawer_demo.dart';
import 'demo/bottom_navigation_bar.dart';
import 'demo/base_demo.dart';
import 'demo/layout_demo.dart';
import 'demo/view_demo.dart';
import './demo/sliver_demo.dart';
import 'demo/navigator_demo.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        //home: Home(), //Home()自定义的
        home: NavigatorDemo(),
        routes: {
          '/about': (context) => MyPage(title: 'About'),
        },
        theme: ThemeData(
            primarySwatch: Colors.yellow, //主题颜色
            highlightColor: Color.fromRGBO(255, 255, 255, 0.5), //白色，不透明度是0.5
            splashColor: Colors.white70 //水波纹不透明度是70的白色
            ));
  }
}

Navigator_demo.dart

import 'package:flutter/material.dart';

class NavigatorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(
              onPressed: null,
              child: Text('Home'),
            ),
            FlatButton(
              child: Text('About'),
              onPressed: () {
                /*Navigator.of(context).push(
                  MaterialPageRoute(
                      builder: (BuildContext context) => MyPage(title: 'About')),
                );*/
                Navigator.pushNamed(context, '/about');///
              },
            ),
          ],
        ),
      ),
    );
  }
}

class MyPage extends StatelessWidget {
  final String title;
  MyPage({this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0.0,
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          }),
    );
  }
}

初始路由：initialRoute

initialRoute: ‘/about’, //初始路由就是about的页面

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        //home: Home(), //Home()自定义的
        //home: NavigatorDemo(),
        initialRoute: '/',//初始路由
        routes: {
          '/': (context) => NavigatorDemo(),//初始路由
          '/about': (context) => MyPage(title: 'About'), 
        },
        theme: ThemeData(
            primarySwatch: Colors.yellow, //主题颜色
            highlightColor: Color.fromRGBO(255, 255, 255, 0.5), //白色，不透明度是0.5
            splashColor: Colors.white70 //水波纹不透明度是70的白色
            ));
  }
}

InkWell：添加溅墨动画效果

在这里插入图片描述

import 'package:flutter/material.dart';
import '../model/post.dart';

class ListViewDemo extends StatelessWidget {
  //自定义一个函数
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
        color: Colors.red,
        margin: EdgeInsets.all(20.0), //外边距
        child: Stack(
          children: [
            Column(
              children: [
                AspectRatio(
                  //把图像放到AspectRatio里设置比例
                  aspectRatio: 16 / 9,
                  child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),

                SizedBox(height: 16.0), //SizedBox留点空间，height高度
                Text(
                  posts[index].title,
                  style: Theme.of(context).textTheme.headline6, //设置文字的样式
                ),
                Text(
                  posts[index].author,
                  style: Theme.of(context).textTheme.subtitle1,
                ),
                SizedBox(
                  height: 16.0,
                ),
              ],
            ),
            Positioned.fill(
                child: Material(
              color: Colors.transparent,
              child: InkWell(
                //溅墨
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {
                  debugPrint('Tap');
                },
              ),
            ))
          ],
        )
        /*Column(//竖着排列的，所以用Column小部件
        children:<Widget>[
        Image.network(posts[index].imageUrl),
        SizedBox(height:16.0),//SizedBox留点空间，height高度
        Text(
          posts[index].title,
          style: Theme.of(context).textTheme.headline6,//设置文字的样式
        ),
        Text(
          posts[index].author,
          style: Theme.of(context).textTheme.subtitle1,
        )
      ]),*/

        );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: _listItemBuilder,
    );
  }
}

在内容详情页上显示内容

内容详情页post_show.dart

import 'package:flutter/material.dart';
import '../model/post.dart';

class PostShow extends StatelessWidget {
  final Post post;
  PostShow({
    @required this.post,
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${post.title}'),
        elevation: 0.0,
      ),
      body: Column(
        children: [
          Image.network(post.imageUrl),
          Container(
            padding: EdgeInsets.all(32.0),
            width: double.infinity,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('${post.title}',
                    style: Theme.of(context).textTheme.bodyText1),
                SizedBox(
                  height: 32.0,
                ),
                Text('${post.author}',
                    style: Theme.of(context).textTheme.bodyText2),
              ],
            ),
          )
        ],
      ),
    );
  }
}

listview_demo.dart

import 'package:flutter/material.dart';
import '../model/post.dart';
import './post_show.dart';

class ListViewDemo extends StatelessWidget {
  //自定义一个函数
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
        color: Colors.red,
        margin: EdgeInsets.all(20.0), //外边距
        child: Stack(
          children: [
            Column(
              children: [
                AspectRatio(
                  //把图像放到AspectRatio里设置比例
                  aspectRatio: 16 / 9,
                  child: Image.network(
                    posts[index].imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),

                SizedBox(height: 16.0), //SizedBox留点空间，height高度
                Text(
                  posts[index].title,
                  style: Theme.of(context).textTheme.headline6, //设置文字的样式
                ),
                Text(
                  posts[index].author,
                  style: Theme.of(context).textTheme.subtitle1,
                ),
                SizedBox(
                  height: 16.0,
                ),
              ],
            ),
            Positioned.fill(
                child: Material(
              color: Colors.transparent,
              child: InkWell(
                //溅墨
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {
                  //debugPrint('Tap');
                  Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => PostShow(post: posts[index])));
                },
              ),
            ))
          ],
        )
        /*Column(//竖着排列的，所以用Column小部件
        children:<Widget>[
        Image.network(posts[index].imageUrl),
        SizedBox(height:16.0),//SizedBox留点空间，height高度
        Text(
          posts[index].title,
          style: Theme.of(context).textTheme.headline6,//设置文字的样式
        ),
        Text(
          posts[index].author,
          style: Theme.of(context).textTheme.subtitle1,
        )
      ]),*/

        );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: _listItemBuilder,
    );
  }
}

在这里插入图片描述
在这里插入图片描述

煮酒Shae
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第 1-9 课：基础布局详解（Scaffold、Container、Center）
持续学习中
09-22 967
前面讲解了 Flutter 的几个基础组件，这节课将讲解跟布局相关的 Widget。 每个平台的应用都有其自己的布局方式，例如 Android 有线性布局、相对布局、绝对布局、帧布局、表格布局等等，HTML 前端也有自己的布局方式。Flutter 当然也不例外。那么这节课就带领大家对 Flutter 的基础布局 Widget 中的几个典型的布局Widget进行详细分析，并结合案例进行详细的用法讲解...
Stack与Align、Stack与Positioned、Flutter AspectRatio、Card卡片、Wrap
06-05
此资源介绍的相关内容有：页面布局 Stack层叠组件、Stack与Align、Stack与Positioned实现定位布局、Flutter AspectRatio、Card卡片组件、卡片图文列表、Wrap组件。 适合新手学习移动端开发，也适合老司机参考。
Flutter Dart 代码片段
如果人生就像一场梦，那就希望你做个好梦！
09-12 1358
本人是做Android开发的，最近学习Flutter的，开发工具还是用我们的AS简单一点，然后发现没有办法像创建Activity那样创建Dart类文件。 那么我们如果先要创建的时候直接帮我实现继承，就像这样 这里我们直接用AS创建Dart文件，生成的文件是空白的，需要手动添加。是不是觉得好麻烦， 相信你也是这样觉得的，所以分享一个小技巧 在这个地方添加上自己的Dart摸板即可，这样一来就可以把...
Flutter开发之——Scaffold
我的博客
03-19 1741
一 概述(Scaffold) Scaffold译为脚手架，建筑领域中，指保证施工过程顺利而搭建的工作平台 在编程领域中与此类似，脚手架的作用就像是一个功能强大的布局容器 Scaffold容器中定义好了导航栏、抽屉、悬浮按钮、内容试图等区域 开发者只需要根据界面的需要，来填充脚手架的内容即可 二 Scaffold介绍 2.1 Scaffold源码 class Scaffold extends StatefulWidget { /// Creates a visual scaffold for mat
flutter基础十：按钮Button，自定义代码片断,ListView
煮酒Shae
10-03 748
文章目录VS Code：自定义代码片断 VS Code：自定义代码片断 之前我们安装过代码片段，可用快速的输入一些内容。那么我们也可以自定义代码片段。
Flutter Widget，Text，Center，MaterialApp，Scaffold，Container控件
达帮主
10-18 627
Flutter Center控件
掌握Flutter导航：页面路由的艺术与实践
最新发布
07-10
Flutter是一个由Google开发的开源移动UI框架，用于构建高效、高性能的iOS和Android应用程序。Flutter使用Dart语言作为开发语言，这是一门简洁、强类型、并且专为客户端应用性能设计的编程语言。 ### Flutter的主要...
flutter_image_cropper：适用于Android和iOS的Flutter插件支持裁剪图像
02-02
Image Cropper不会直接在Dart代码中处理图像，而是使用公开Dart API，Flutter应用程序可使用该API与两个功能非常强大的本机库（ 和 ）进行通信以裁剪和旋转图像。 因此，所有积分都属于这些库。 uCrop-亚兰提斯 该...
flutter_idiomatic:这是具有惯用代码结构的入门套件
05-28
flutter_idiomatic 这是具有惯用代码结构的入门套件：)通过BLoC进行Firebase身份验证和GraphQL CRUD。 使用单元测试，窗口小部件测试和集成测试作为BDD。 受到启发。 如何开始 $ flutter packages pub run build_...
flutter_mp:将Flutter代码带到迷你程序
03-13
flutter_mp的目标是把Flutter扩展到类小程序平台， Flutter是一个非常优秀的跨端框架，可以在Android ， iOS ，通过Flutter_web还可以运行在web平台上，但是官方并没有涉及小程序平台，希望flutter_mp可以包围这...
禁用Security Center（wscsvc）服务
10-28
通过添加注册表文件数据，可对Security Center（wscsvc）服务进行禁用，开机重启后生效。重启后如有提示打开安全中心服务，可在设置-》系统-》通知和操作 下拉找到 安全和维护进行关闭即可
Flutter入门-路由
诗未冷的专栏
09-28 1470
Flutter普通路由使用，命名路由使用，以及一些小技巧
Flutter系列之Navigator组件使用
躬行之
12-22 3116
PS：想做一件事很容易，真正去做一件事很困难。 Navigator 使用堆栈规则来管理 Widget，Navigator 记录了页面访问记录，可以使用 Navigator 来完成页面之间的跳转操作。 在 Android 开发中，我们平时说的跳转都是指的是 Activity 的跳转，也称为页面跳转，在 Fluter 中都是指的是 Route 的跳转，Android 中的页面在 Flutter 中对应 Route，Navigator 负责 Route 对象堆栈的管理，并提供管理堆栈的方法，如 Navigat.
使用text-align: center；的居中问题
weixin_45663697的博客
03-24 8456
问题：把<img>和<span>放在div标签里用text-align:center;进行div块内元素居中但是文本居中了，图片没有居中 解决方法 我们先来说一下 w3cschool对text-align定义：text-align 属性规定元素中的文本的水平对齐方式。通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。 其次我们要知道text-align...
Flutter 之 Scaffold
厚德出品，必是精品
10-28 6034
Scaffold是实现Material Design的布局结构。也就是说， MaterialApp 的 child 是 Scaffold Widget。 在Material设计中定义的单个界面上的各种布局元素，在 Scaffold 中都有支持，比如 左边栏（Drawers）、snack bars、以及 bottom sheets。 Scaffold 有下面几个主要属性： appBar：显示在界...
flutter系列之:builder为构造器而生
程序那些事
10-18 846
flutter中有很多种Builder，虽然所有的builder都是构造器，但是不同的builder之间还是有很多差距的。今天我们来详细介绍一下Builder，LayoutBuilder，StatefulBuilder这几个builder的使用。本文介绍了三个常用的Builder，大家可以仔细体会。更多内容请参考最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！欢迎关注我的公众号:「程序那些事」,懂技术，更懂你！
CenterNet
热门推荐
bupt_cy
04-21 1万+
我们介绍一篇很好的 one-stage 目标检测论文：CenterNet: Keypoint Triplets for Object Detection，该论文是由 中科院，牛津大学以及华为诺亚方舟实验室联合提出。截至目前，据我们所知，CenterNet 应该是 one-stage 目标检测方法中性能最好的方法。 《CenterNet: Keypoint Triplets for Object ...
vCenter 部件关系简介 & 网络原理
weixin_33980459的博客
08-30 629
目录 目录 主机和集群 vCenter Datacenter Cluster Host Virtual Machine Folder Resource Pool Template 数据存储 Datastore Cluster Datastore 网络 标准交换机 分布式虚拟交换机 参考资料 主机...
Flutter Vscode 快捷代码片段
八戒卖萌的博客
01-31 851
{ "StatelessWidget": { "prefix": "sl", "body": [ "class ${1:WidgetName} extends StatelessWidget {", "\t@override", "\tWidget build(BuildContext context) {", "\t\treturn ${2:Container}();", "\t...
Flutter深度解析：Container布局详解
"Flutter布局分析1" 在Flutter开发中，布局是构建用户界面的关键部分。本篇主要关注Flutter中的Container布局，这是一种高度可定制且在日常开发中最常用的布局方式。Container布局因其在小单元布局细节调整上的灵活...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值