Flutter教程 — 基础组件综合实例

简介: Flutter基础教程综合实例

前言:终于到了大家最期待的综合实例
在这里插入图片描述

阅读完这节内容可以帮你巩固提升!

正文:

老规矩先上效果图,毕竟有图有真相!
在这里插入图片描述
源码找我领取哦,在文章最下面~

先分析一下效果图
在这里插入图片描述

第一步:实现底部跳转栏

小T这里是五个Tab,所以要先定义五个Dart文件,进行一些初始配置.

然后在main引入这五个界面,并且配置跳转的图标和文字,记得定义跳转指针哦在这里插入图片描述
然后在脚手架使用:

//核心代码
return Scaffold(
  body: page[_currentIndex],
  bottomNavigationBar: BottomNavigationBar(
    items: bottomNavItems,
    currentIndex: _currentIndex,
    type: BottomNavigationBarType.fixed,
    onTap: (index) {
      setState(() {
        _currentIndex = index;
      });
    },
  ),
);

第二步:实现顶部背景和头像(写在testOne.dart文件中)

在这里插入图片描述
我们可以分析得出:需要一张背景,一张头像居中且位于背景上层,文字居中.

代码实现:

Container(
    alignment: Alignment.center,
    child: Stack(   //叠层布局,用于将头像放置于背景之上,可以参考小T的这篇布局详解
      alignment: Alignment.center, //设置为居中
      children: <Widget>[
        Container(
          width: MediaQuery.of(context).size.width, //设置宽度为屏幕宽度
          child: Image.asset(
            'images/HomePage/topImage.jpg',   //使用本地背景
          ),
        ),
        Positioned.fill(                //虚化图片的组件,可以参考我的进阶常用组件.
          child: BackdropFilter(
            filter: ImageFilter.blur(
              sigmaX: 15,
              sigmaY: 15,
            ),
            child: Container(
              color: Colors.white10,
            ),
          ),
        ),
        Container(
          width: 124,
          margin: EdgeInsets.only(top: 100),
          child: Image.asset("images/HomePage/imageHead.png"),
        )
      ],
    )),
    Container(
            child: Text(
              "阿.T",
              style: TextStyle(fontSize: 30),
            ),
          ),
          Row(  //一行的文字 
            mainAxisAlignment: MainAxisAlignment.center,  //居中布局
            children: [
              Image.asset(
                "images/HomePage/Gps.png",   
                width: 24,
              ),
              Padding(
                padding: EdgeInsets.all(5.0),
              ),
              Text(
                "杭州",
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),

第三步:实现图片块

在这里插入图片描述
分析:我们可以将这一整块看作是一行,里面有两块,左边一块大的图片,右边一堆小图片,然后将右边的图片在细分为两列.

难点:1.主要是懂得Row和Column这两个行和列的布局使用

​ 2.图片圆角和图片阴影,使其更为具体

代码实现: (嵌套比较复杂,建议自行理解,看代码说实话真的有点累,自己理解就行)在这里插入图片描述
需要详细代码的就去下载源码,这里就给大家分析一下难点~
图片圆角和图片阴影:

Container(
                width: 175,
                height: 175,
                margin: EdgeInsets.only(left: 14),
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                        color: Colors.black54,
                        offset: Offset(4.0,12.0), //阴影xy轴偏移量
                        blurRadius: 15.0, //阴影模糊程度
                        spreadRadius: 1.0 //阴影扩散程度
                        ),
                  ],
                  borderRadius: BorderRadius.circular(10), //圆角
                  image: DecorationImage(
                    image: NetworkImage( 
                        "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
                  ),
                ),
              ),

彩蛋:在这里插入图片描述
大家在开发中是不是经常看到这样的线,这个东西怎么实现呢:在这里插入图片描述
代码:

Container(
  color: Color.fromARGB(255, 200, 200, 200),
  height: 2,
),

是不是非常滴简单~

这样这个综合实例就完成了,希望大家有所收获.

欢迎留言纠正 ~

相关文章
|
3月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
184 58
|
3月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
109 49
|
1月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
126 1
|
1月前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
101 1
|
3月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
179 60
|
1月前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
25 2
|
2月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
1月前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
43 0
|
3月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
|
3月前
Stream 组件在 Flutter 中的具体使用方法是什么?
Stream 组件在 Flutter 中的具体使用方法是什么?