Flutter ——发现页面和我的页面搭建

最新推荐文章于 2024-06-27 18:07:02 发布

LinShunIos

最新推荐文章于 2024-06-27 18:07:02 发布

阅读量1.3k

点赞数 4

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

本文链接：https://blog.csdn.net/LinShunIos/article/details/121094835

版权

本文介绍了如何在Flutter中搭建发现页面和我的页面。首先，通过修改currentIndex默认选择发现页面，然后使用Scaffold和Container等组件构建页面布局。对于发现页面，创建了DiscoverCell，包括ListView和GestureDetector以实现点击跳转。在点击事件中，通过改变_color来实现选中效果。我的页面则使用Stack和Positioned组件来放置相机图标，同时通过MediaQuery去除顶部padding，完成头部界面的定制。

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

Flutter —— 发现页面和我的页面搭建

- 1. 发现页面
- 2. 我的页面

上文中进行了基础页面的搭建，并且创建了底部导航栏，那么今天就开始搭建发现页面和我的页面。
先来到上次的rootpage中将_currentIndex改为2，这样默认选择的就是发现页面，方便进行页面搭建。
要搭建页面，心里就要大概思考要用什么部件来搭建这个页面。

1. 发现页面

那么看到这个界面，看到有AppBar，那么就想到要用scaffold，然后在body用container包着row来实现。

在这里插入图片描述
这里将AppBar的Title 颜色改成黑色，然后背景色改为灰色，并且将底部阴影的大小改为0，并且为安卓设置centerTitle为true，这样切出去的时候标题就会在中间，然后创建一个container。

class _DiscoverPageState extends State<DiscoverPage> {
  Color _themColor = Color.fromRGBO(220, 220, 220, 1.0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('发现页面',style: TextStyle(color: Colors.black),),
        backgroundColor: _themColor,
        elevation: 0,
        centerTitle: true,
      ),
      body:  Container(
        height: 800,
        color: _themColor,
      ),
    );
  }
}

接下来创建discover cell。日常开发中，都是先使用StatelessWidget，当后面需要保留状态时才修改成StatefulWidget。所以这里先用StatelessWidget来创建DiscoverCell，然后创建四个需要传进来的参数，创建构造方法,其中title和imageName必须要有所以是required。这里页面的话思考使用Row，并且在Row里面也使用2个Row，一个左边一个右边 ,所以这里用到spacebetween。

class DiscoverCell extends StatelessWidget {
  final String? title;
  final String? imageName;
  final String? subTitle;
  final String? subImageName;

  DiscoverCell({required this.title, required this.imageName, this.subTitle, this.subImageName}): assert(title != null,"title 不能为空"),assert(imageName != null,"imageName 不能为空");

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 55,
      color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          // left
          Container(),
          // right
          Container(),
        ],
      ),
    );
  }
}

这里添加所需要的部件，并且给给container添加内边距padding。

Container(
            padding: EdgeInsets.all(10),
            child: Row(
              children: [
                //image
                Image(
                  image: AssetImage(imageName!),
                  width: 20,
                ),
                const SizedBox(
                  width: 15,
                ),
                //title
                Text(title!),
              ],
            ),
          ),
          // right
          Container(
              padding: EdgeInsets.all(10),
              child: Row(
                children: [
                  // subtitle
                  Text(subTitle ?? ""),
                  // subimage
                  Image(
                    image: AssetImage(subImageName ?? ""),
                    width: 20,
                  ),
                  //箭头
                  Image(
                    image: AssetImage('images/icon_right.png'),
                    width: 15,
                  ),
                ],
              )),
        ],
      ),
    );

DiscoverCell创建完，