用Flutter实现详情页、介绍页

最新推荐文章于 2023-06-23 18:51:25 发布
最新推荐文章于 2023-06-23 18:51:25 发布
阅读量3.2k 收藏 2
点赞数 1
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40763897/article/details/108414745
版权

1.效果图：

在这里插入图片描述

2.分析布局

布局建议通过以下方式来分析：

  1. 找出行和列
  2. 布局包含网格吗?
  3. 有重叠的元素吗?
  4. 是否需要选项卡?
  5. 注意需要对齐、填充和边框的区域

本例的如下图的分析，可知：四个元素排列成一列：一个图像，两个行和一个文本块。
在这里插入图片描述
标题部分有三个子项：一列文字，一个星形图标和一个数字。它的第一个子项，列，包含2行文字。 第一列占用大量空间，所以它必须包装在Expanded widget中。

下面的按钮部分也有3个子项：每个子项都是一个包含图标和文本的列：

在这里插入图片描述

3.实现布局

为了简化实现，可以采用逐个实现，再整合各个部分。一旦拆分好布局，最简单的就是采取自上而下的方法来实现它。为了最大限度地减少深度嵌套布局代码的视觉混淆，将一些实现放置在变量和函数中。

3.1.实现图像部分

body: ListView(
          children: <Widget>[
            Image.asset(
              'assets/images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,// BoxFit.cover 告诉框架，图像应该尽可能小，但覆盖整个渲染框
            ),
    		// ...
  ],
)

BoxFit.cover 告诉框架，图像应该尽可能小，但覆盖整个渲染框。

3.2.实现标题行

在这里插入图片描述
标题部分，有三个子项：一列文字，一个星形图标和一个数字。它的第一个子项，列，包含2行文字。 第一列占用大量空间，所以它必须包装在Expanded widget中。

  • 首先，构建标题部分左边栏。将Column（列）放入Expanded中会拉伸该列以使用该行中的所有剩余空闲空间。 设置crossAxisAlignment属性值为CrossAxisAlignment.start，这会将该列中的子项左对齐。
  • 将第一行文本放入Container中，然后底部添加8像素填充。列中的第二个子项（也是文本）显示为灰色。
  • 标题行中的最后两项是一个红色的星形图标和文字“41”。将整行放在容器中，并沿着每个边缘填充32像素。
/// 标题栏
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: <Widget>[
          Expanded(
            // Expanded这个控件会把同级别的控件，在父控件中填充满整个父控件。
            // 在Expanded中的子控件，会自动缩放，填充使得整个父控件被填充，如果添加文字之后，Expanded 它的大小会受到文字的影响
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: Text(
                    'Oeschinen Lake Campground',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Kandersteg Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                )
              ],
            ),
          ),
          FavoriteWidget(),
        ],
      ),
    );

标题行中的最后两项是一个红色的星形图标和文字“41”，我们写成一个独立的控件：

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

  void _toggleFavorite() {
    setState(() {
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(0),
          child: IconButton(
            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child: Container(
            child: Text('$_favoriteCount'),
          ),
        )
      ],
    );
  }
}

3.3.实现按钮行

在这里插入图片描述
按钮部分包含3个使用相同布局的列 - 上面一个图标，下面一行文本。该行中的列平均分布行空间， 文本和图标颜色为主题中的primary color，它在应用程序的build()方法中设置为蓝色。由于构建每个列的代码几乎是相同的，因此使用一个嵌套函数，如buildButtonColumn，它会创建一个颜色为primary color，包含一个Icon和Text的 Widget 列。

  Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(icon, color: color),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }

通过调用函数并传递icon和文本来构建这些列。然后在行的主轴方向通过 MainAxisAlignment.spaceEvenly 平均的分配每个列占据的行空间：

 /// 按钮组
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          _buildButtonColumn(color, Icons.call, 'CALL'),
          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color, Icons.share, 'SHARE'),
        ],
      ),
    );

3.4.实现文本部分

将文本放入容器中，以便沿每条边添加32像素的填充。softwrap属性表示文本是否应在软换行符（例如句点或逗号）之间断开。

  /// 文本框
    Widget textSection = Container(
      padding: const EdgeInsets.all(32),
      child: Text(
        '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true, //是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
      ),
    );

4.整合

将上面这些widget放置到ListView中，而不是列中，因为在小设备上运行应用程序时，ListView会自动滚动。

MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter layout demo'),
        ),
        body: ListView(
          children: <Widget>[
            Image.asset(
              'assets/images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,// BoxFit.cover 告诉框架，图像应该尽可能小，但覆盖整个渲染框
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );

5.补充说明

5.1.

name: interactive
description: >
  Sample app from "Adding interactivity", https://flutter.io/docs/development/ui/interactive.
version: 1.0.0

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true
  assets:
    - assets/images/

目录：

├── assets
│   └── images
├── lib
│   ├── main.dart

完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';


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

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Image Picker Demo',
      home: IntroductionPage(),
    );
  }
}

class IntroductionPage extends StatelessWidget {
  Column _buildButtonColumn(Color color, IconData icon, String label) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Icon(icon, color: color),
        Container(
          margin: const EdgeInsets.only(top: 8),
          child: Text(
            label,
            style: TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w400,
              color: color,
            ),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    /// 标题栏
    Widget titleSection = Container(
      padding: const EdgeInsets.all(32),
      child: Row(
        children: <Widget>[
          Expanded(
            // Expanded这个控件会把同级别的控件，在父控件中填充满整个父控件。
            // 在Expanded中的子控件，会自动缩放，填充使得整个父控件被填充，如果添加文字之后，Expanded 它的大小会受到文字的影响
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(bottom: 8),
                  child: Text(
                    'Oeschinen Lake Campground',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                Text(
                  'Kandersteg Switzerland',
                  style: TextStyle(
                    color: Colors.grey[500],
                  ),
                )
              ],
            ),
          ),
          FavoriteWidget(),
        ],
      ),
    );

    /// 按钮组
    Color color = Theme.of(context).primaryColor;
    Widget buttonSection = Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          _buildButtonColumn(color, Icons.call, 'CALL'),
          _buildButtonColumn(color, Icons.near_me, 'ROUTE'),
          _buildButtonColumn(color, Icons.share, 'SHARE'),
        ],
      ),
    );

    /// 文本框
    Widget textSection = Container(
      padding: const EdgeInsets.all(32),
      child: Text(
        '''
Lake Oeschinen lies at the foot of the Blüemlisalp in the Bernese Alps. Situated 1,578 meters above sea level, it is one of the larger Alpine Lakes. A gondola ride from Kandersteg, followed by a half-hour walk through pastures and pine forest, leads you to the lake, which warms to 20 degrees Celsius in the summer. Activities enjoyed here include rowing, and riding the summer toboggan run.
        ''',
        softWrap: true, //是否自动换行，若为false，文字将不考虑容器大小，单行显示，超出屏幕部分将默认截断处理
      ),
    );

    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('flutter layout demo'),
        ),
        body: ListView(
          children: <Widget>[
            Image.asset(
              'assets/images/lake.jpg',
              width: 600,
              height: 240,
              fit: BoxFit.cover,// BoxFit.cover 告诉框架，图像应该尽可能小，但覆盖整个渲染框
            ),
            titleSection,
            buttonSection,
            textSection,
          ],
        ),
      ),
    );
  }
}

class FavoriteWidget extends StatefulWidget {
  @override
  _FavoriteWidgetState createState() => _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State<FavoriteWidget> {
  bool _isFavorited = true;
  int _favoriteCount = 41;

  void _toggleFavorite() {
    setState(() {
      if (_isFavorited) {
        _favoriteCount -= 1;
        _isFavorited = false;
      } else {
        _favoriteCount += 1;
        _isFavorited = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          padding: EdgeInsets.all(0),
          child: IconButton(
            icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)),
            color: Colors.red[500],
            onPressed: _toggleFavorite,
          ),
        ),
        SizedBox(
          width: 18,
          child: Container(
            child: Text('$_favoriteCount'),
          ),
        )
      ],
    );
  }
}
WongKyunban
关注
专栏目录
Flutter 利用 Hero 动效实现列表详情页的无缝切换
Flutter 跨平台技术研究
06-05 484
利用 Hero 动画实现列表到详情页无缝切换，纵享丝滑，用户体验更好。
Flutter 实现京东商品列表页布局
JerryWu145的专栏
02-15 3502
如题，我们先看效果图 虽然不是1：1，但是也是差不多了，而且通过我代码布局中的方式，还是能够1：1实现的。 好，废话不多说，我们开始吧 一、准备数据 图片是用京东的图片，在线获取 然后用 list 进行整合 创建一个 Goods 类 将数据添加进去 二、开始做左边的图片 这边很简单 三、开始做右边的布局，这边...
Flutter系列（十一）实现商城首页和商品详情页
摸金校尉的博客
06-23 2520
本文用flutter实现商城首页和商品详情页
Flutter项目——静态页面布局4详情页
m0_48132830的博客
11-22 695
详情页布局
Flutter版本玩Android(3)——文章详情页
xingfeng_coder的博客
08-07 858
本文主要包含路由的跳转以及WebView显示文章详情页。 效果如下： 路由跳转 Flutter通过Navigator类来进行页面路由的管理。 push：指定跳转的widget pushNamed：命名路由，string—>widget pushXXX表示跳转到下一页面，pop表示跳出当前页面，可以携带参数跳转。具体可以参考路由管理。 携带参数跳转 Navigator.of(contex...
文章详情页
anmi3721的博客
08-05 420
一、文章详情页访问设计 　　访问文章详情页，访问文章路径类似：https://www.cnblogs.com/wupeiqi/articles/3148888.html 　　参照访问路径编写文章详情页路由如下： urlpatterns = [ ... # 文章详情页 re_path('^(?P<username>\w+)/article...
flutter详细内容页开源
iCloudEnd的博客
02-14 234
源码 import 'package:flutter/material.dart'; // Uncomment lines 7 and 10 to view the visual layout at runtime. // import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;...
Flutter-防京东商城项目-编写详情页面商品通过接口获取数据-21
weixin_38716347的博客
09-04 232
一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。 本章目标： 1.获取网络数据，赋值到第一个视图里面 1.编写数据模型 class ProductContentModel { ProductContentitem result; ProductContentModel({this.result}); Produ
30 Flutter仿京东商城项目 计算总价 删除购物车数据 加入购物车toast提示 商品页面跳转到购物车页面.rar
03-25
在本项目中，我们主要探讨的是使用Flutter框架构建一个仿京东商城的应用，涵盖了商品浏览、购物车功能实现、用户交互及页面导航等多个关键知识点。以下是关于这些内容的详细阐述： 1. **Flutter框架**：Flutter是由...
Flutter项目——静态页面布局3
m0_48132830的博客
11-21 190
Flutter项目——静态页面布局3
Flutter实现App功能引导页
01-21
App功能介绍页，主要是由介绍app功能的几张图片和当前页指示符组成，如下效果 我们来一步一步实现上面的界面,左右滑动切换显示功能页,这个可以通过PageView来实现,底部的指示符半透明覆盖在PageView上,开发过Android同学知道可以用Framelayout布局来实现，Flutter上也有类似的控件Stack，我们先完成骨架代码 // An highlighted block void main() => runApp(App()); class App extends StatelessWidget { @override Widget build(BuildContex
Flutter 列表-详情
兰叶书的博客
12-16 456
import 'package:flutter/material.dart'; class Product{ final String title; final String description; //描述 Product(this.title,this.description); } void main(){ runApp(MaterialApp( title:...
flutter（1） 启动页 引导页
一抹离愁
11-26 4555
flutter 启动页 引导页 Android 原生引导页面的方法如下 1 自定义 使用 ViewPager控件 2使用第三方 组建AppIntroAppIntro快速启动页面 flutter引导页面的方式 1使用 pageView (指示器需要自定义) 2使用TabBarView，指示器TabPageSelector 代码如下可以直接使用。 启动页面 class SplashPage extends StatefulWidget { @override _Sp...
Flutter 新闻客户端 - 09 详情页展示、分享、远程真机调试
会煮咖啡的猫咪
07-10 747
B站视频 https://www.bilibili.com/video/BV18e411s7A1 https://www.bilibili.com/video/BV1RZ4y1W7CN 本节目标 详情页技术方案比较 载入 web 内容 自动计算高度 清除广告、推荐 拦截请求 loading 状态显示 分享插件 远程 android 设备调试 详情展示 技术方案选择 分析工具 UI automator view 文件位置 /Users/ducafecat/Library/Android/sdk/to.
Flutter之页面布局
追风者
08-13 689
Column、Row、Stack以及Center之前博客有过就不赘述了 get到了一些与布局相关的组件例如 1、FractionallySizedBox class ListPage extends StatelessWidget { @override Widget build(BuildContext context) { return Column(...
flutter 仿哔哩哔哩，视频详情页面效果
zhangshichi的博客
03-26 937
flutter 仿B站，视频详情页面效果， 需求：和B站一致； 效果 flutter 自带的SliverPersistentHeader在细节上并不能满足需求，本文讲述如何修改某个属性达到B站的效果； 代码： CustomScrollView( slivers: [ MySliverPersistentHeader( isScroll: isPlay, delegate: MySliverDelegate()
用 Flutter 仿写微信“发现 + 我”的页面
AI研习社
12-12 447
↓推荐关注↓发现页面实现这里我们仿照微信的发现页面用 Flutter 类实现这页面的简单布局及每个 cell 的点击效果及点击每条 cell 之后跳转到一个新的页面。这里我们分几步分别来实...
Flutter 主要页面布局
XinBaDeRongYao的博客
04-05 198
在这个示例中，我们使用了 Scaffold 组件来构建页面。我们在 appBar 属性中设置了一个顶部的 AppBar，在 body 属性中设置了一个居中显示的 Text 组件，以及在 floatingActionButton 属性中设置了一个浮动按钮。我们还在 bottomNavigationBar 属性中设置了一个底部导航栏，以及在 drawer 属性中设置了一个侧边栏。你可以根据自己的需要添加和修改 Scaffold 中的各个属性，来构建自己需要的应用程序页面。
Flutter实现京东淘宝电商商品详情页效果
小鸡仔hana的博客
07-15 2196
之前开发电商的功能时，需要做商品界面，UI基本是参考京东、淘宝的效果，以前android原生开发的时候觉得很好做，切到Flutter之后只能自己想办法，所以自己后来做出了这样的效果，分享下实现方案。 先看效果图吧 效果图比较 这是京东的效果 下图是我做的效果，基本和京东的保持一致，点击tab可快速切换到某一页，滑动列表tab自动切换。 思路 仔细查看京东的商品详情页，可以整理出几点 tabbar随着慢慢滑动一定距离会变透明，再次滑到顶部则重新变成不透明 滑动的过程中，到达新的页面内容，顶部的tab下标
flutter 实现微信支付
最新发布
10-11
在 Flutter 中实现微信支付，通常需要借助第三方库如 `flutter_wx_pay` 或者直接集成微信官方提供的 SDK。以下是基本步骤： 1. **添加依赖**: 首先，你需要在你的 Flutter 项目中添加微信支付的插件。在 `pubspec....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值