（十）Flutter 路由 push pop 与List 中溅墨（我咋觉得应该叫水波纹）效果（InkWell）

最新推荐文章于 2024-08-17 12:54:57 发布

安果移不动

最新推荐文章于 2024-08-17 12:54:57 发布

阅读量795

点赞数

分类专栏： 042Flutter

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/85599104

版权

042Flutter 专栏收录该内容

135 篇文章 26 订阅

订阅专栏

修改Main.dart

import 'package:flutter/material.dart';
import 'demo/navigator_demo.dart';
import 'demo/page_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: NavigatorDemo(),
      routes: {
        '/about': (context) => PageDemo(title: 'About'),
        '/home': (context) => PageDemo(title: 'Home'),
      },
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

navigator_demo.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/demo/page_demo.dart';
class NavigatorDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              child: Text('Home'),
              onPressed: (){
                Navigator.pushNamed(context, '/home');
              },
            ),
            FlatButton(
              child: Text('About'),
              onPressed: (){
                Navigator.of(context).push(
                    MaterialPageRoute(builder: (BuildContext context) {
                      return PageDemo(title:"About");
                    }

                    )
                );
              },
            )
          ],

        ),
      ),
    );
  }
}

【page_demo.dart】

import 'package:flutter/material.dart';

class PageDemo extends StatelessWidget {
  final String title;
  PageDemo({
    this.title
  });
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        elevation: 0.0,
      ),
      floatingActionButton: FlatButton(
        child: Icon(Icons.arrow_back),
        onPressed: (){
          Navigator.pop(context);
        },
      ),
    );
  }
}

Push 和pop 是进入和退出页面也可以主动调用，除了这种方式写路由还有一种是使用initialRoute

方式如下

修改main.dart

import 'package:flutter/material.dart';
import 'demo/navigator_demo.dart';
import 'demo/page_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // home: NavigatorDemo(),
      initialRoute: "/",
      routes: {
        '/': (context) => NavigatorDemo(),
        '/about': (context) => PageDemo(title: 'About'),
        '/home': (context) => PageDemo(title: 'Home'),
      },
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

效果同上就不多贴图

    '/':(context)=>NavigatorDemo(),

表示初始路由对应的文件。

   initialRoute: '/',

初始路由，代表根路由对应的路径

也就是说如果initiaRoute 换成初始值/about

      initialRoute: '/about',
      routes: {
        '/':(context)=>NavigatorDemo(),
        '/about':(context)=>PageDemo(title: 'About'),
        '/home':(context)=>PageDemo(title: 'Home'),
      },

那么刚进入主页就会先显示about页面（不贴图了。。）

so 我们根据这一特性就会知道。这么写可以直接路由到主页

import 'package:flutter/material.dart';
import 'package:flutter_app/home/home.dart';
import 'demo/navigator_demo.dart';
import 'demo/page_demo.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // home: NavigatorDemo(),
      initialRoute: '/',
      routes: {
        '/':(context)=>Home(),
      },
      theme: ThemeData(
          primarySwatch: Colors.yellow,
          highlightColor: Color.fromRGBO(255, 255, 255, 0.5),
          splashColor: Colors.white70),
    );
  }
}

之前我们写过一个listviewdemo 我们这次加上一个水波纹特效（溅墨）

listview_demo.dart

precode

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

class ListViewDemo extends StatelessWidget {
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(posts[index].imgeUrl),
          SizedBox(height: 16.0),
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.headline6,
          ),
          Text(
            posts[index].author,
            style: Theme.of(context).textTheme.subtitle1,
          ),
          SizedBox(height: 16.0),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {

    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: _listItemBuilder,
    );
  }
}

修改图片使用

AspectRatio

布局包裹

Stack

并新增

       Positioned.fill(
            child: Material(
              color: Colors.transparent,
              child: InkWell(
                splashColor: Colors.white.withOpacity(0.3),
                highlightColor: Colors.white.withOpacity(0.1),
                onTap: () {
                  debugPrint("tap");
                },
              ),
            ),
          )

改变后代码

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

class ListViewDemo extends StatelessWidget {
  Widget _listItemBuilder(BuildContext context, int index) {
    return Container(
        color: Colors.white,
        margin: EdgeInsets.all(8.0),
        child: Stack(
          children: <Widget>[
            Column(
              children: <Widget>[
               AspectRatio(
                 aspectRatio: 16/9,
                 child:  Image.network(posts[index].imgeUrl,fit: BoxFit.cover),
               ),
                SizedBox(height: 16.0),
                Text(
                  posts[index].title,
                  style: Theme.of(context).textTheme.title,
                ),
                Text(
                  posts[index].author,
                  style: Theme.of(context).textTheme.subhead,
                ),
                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');
                    },
                ),
              ),
            )
          ],
        ));
  }

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

效果

最后温习一下push ListView和详情页的交互

新建 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: <Widget>[
          Image.network(post.imgeUrl),
          Container(
            padding: EdgeInsets.all(32.0),
            width: double.infinity,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '${post.title}',
                  style: Theme.of(context).textTheme.title,
                ),
                Text(
                  '${post.author}',
                  style: Theme.of(context).textTheme.subhead,
                ),
                SizedBox(height: 32.0,),
                Text(
                  '${post.description}',
                  style: Theme.of(context).textTheme.body1,
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

之前的post.dart 加上description属性

class Post {
  const Post({
    this.title,
    this.author,
    this.imgeUrl,
    this.description,
  });

  final String title;
  final String author;
  final String imgeUrl;
  final String description;
}

final List<Post> posts = [
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '1',
  ),
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '2',
  ),
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '3',
  ),
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '4',
  ),
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
  ),
  Post(
    title: '七叶森',
    author: 'Liu An',
    imgeUrl:
        'https://www.baidu.com/img/bd_logo1.png?where=super',
    description: '5',
  )
];

listview_demo.dart持续修改Inwell的ontap节点

               onTap: (){
                      Navigator.of(context).push(
                        MaterialPageRoute(builder: (BuildContext context) {
                          return PostShow(post:posts[index]);
                        })
                      );
                    },