Flutter--Navigator体验、水波纹InkWell体验

最新推荐文章于 2024-05-21 22:16:50 发布

写bug的小气球

最新推荐文章于 2024-05-21 22:16:50 发布

阅读量262

点赞数

分类专栏： Flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_46013619/article/details/120140569

版权

Flutter 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了如何在 Flutter 应用中复用之前创建的 SliverDemo，添加了一个关于页面，展示了如何使用 AspectRatio 和 Image.network 展示宽高比为 16:9 的图片，并封装了动态路由组件以便传参。同时，详细地展示了 Scaffold、AppBar 和 Column 结构的运用。

摘要由CSDN通过智能技术生成

https://github.com/zzxingqiba/flutter_demo
在这里插入图片描述
复用上一次的sliver_demo继续添加内容

import 'package:flutter/material.dart';

class AboutDetail extends StatelessWidget {
  final String title;
  const AboutDetail({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$title'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            AspectRatio(
              // AspectRatio作用于父控件，根据aspectRatio计算父控件的宽或者高，AspectRatio的子控件将填充满父控件，子控件的宽高无效
              aspectRatio: 16 / 9,
              child: Image.network(
                'https://img1.baidu.com/it/u=2233362797,2905857249&fm=26&fmt=auto&gp=0.jpg',
                fit: BoxFit.cover, //填充
              ),
            ),
            Container(
              padding: EdgeInsets.all(32.0),
              width: double.infinity,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: Theme.of(context).textTheme.headline6,
                  ),
                  Text(
                    '小林家的龙女仆',
                    style: Theme.of(context).textTheme.subtitle1,
                  ),
                  SizedBox(
                    height: 32.0,
                  ),
                  Text(
                    '龙形态能飞、能喷火会使用魔法，但是平时可以变成外貌大约二十岁的女孩子形态。为了报答其救命恩人小林而自愿来做女仆，并且非常喜欢小林，她几乎没有人类的常识，总是让小林吃她的尾巴，性格开朗活泼，虽然有时候会陷入抑郁但也会用微笑来掩盖；也有一点痴女属性，爱着小林的一切，与小林感情极深，且她们已经无法忍受没有对方的生活，人形态依然可以使用龙的技能，曾言“因为是Dragon，所以胸围是D杯”。看起来一个整天都很开心愉快的龙娘，其实内心十分细腻，偶尔也会小小的忧郁，但见到小林之后就会恢复开朗。',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

补充之前的封装路由组件，便于动态传参。
在这里插入图片描述

import 'package:flutter/material.dart';
import '../page/search/Search.dart';
import '../page/tabs/Tabs.dart';
import 'package:flutter_application_1/page/launch/Launch.dart';

// Tabs()
final routes = {
  '/': (context) => LaunchPage(),
  '/tabs': (context) => Tabs(),
  // '/search': (context, {arguments}) => SearchPage(arguments: arguments),
};

// ignore: top_level_function_literal_block
var onGenerateRoute = (RouteSettings settings) {
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  } else {
    return null;
  }
};