0. 项目简介

项目想法脱胎于2023年服务外包大赛A18题 随手买（详情）

整个APP思路如下：

这篇博客主要服务于个人简介界面，在登录界面点击指纹解锁按钮后进入本界面。

1. 效果展示

2. 代码

依赖如下

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  # 配置轮播图插件
  flutter_swiper: ^1.1.6

相关文件如下

myself.dart

myself.dart

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

class myself extends StatefulWidget {
  const myself({Key? key}) : super(key: key);

  @override
  State<myself> createState() => _myselfState();
}

class _myselfState extends State<myself> {
  @override
  Widget build(BuildContext context) {

    List<Map> imageList = [
      {
        "asset":"assets/images/hjh1.jpg"
      },
      {
        "asset":"assets/images/hjh2.jpg"
      },
      {
        "asset":"assets/images/hjh3.jpg"
      },
      {
        "asset":"assets/images/hjh4.jpg"
      },
      {
        "asset":"assets/images/hjh5.jpg"
      }
    ];

    Widget myselfListView = Center(
      child: Card(
          shape: RoundedRectangleBorder(//设置圆角
            borderRadius: BorderRadius.circular(20),
          ),
          elevation: 5,
          child: SizedBox(
            height: 750,
            width: 380,
            child: Column(
              children: <Widget>[
                Padding(
                  padding: EdgeInsets.fromLTRB(15, 15, 15, 0),
                  child: Container(
                    width: 370,
                    height: 300,
                    // child: Image.asset("assets/images/3.jpg"),

                    child: Container(
                      decoration: const BoxDecoration(
                        color: Colors.transparent,
                        borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(5), topRight: Radius.circular(5)),
                      ),
                      child: Swiper(
                        itemBuilder: (BuildContext context, int index){
                          return Image.asset(imageList[index]["asset"], fit: BoxFit.cover,);
                        },
                        itemCount: imageList.length,
                        pagination: SwiperPagination(),
                        control: SwiperControl(),
                        loop: true,
                        autoplay: true,
                      ),
                    ),
                  ),

                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                        padding: EdgeInsets.fromLTRB(20, 20, 6, 0),
                        child: ListTile(
                          title: Text("胡家赫", style: TextStyle(fontSize: Theme.of(context).textTheme.headline4!.fontSize)),
                        )
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(30, 10, 6, 0),
                        child: Text("ClarkHu NB 随车买", style: TextStyle(fontSize: Theme.of(context).textTheme.headline5!.fontSize))
                    ),
                    Padding(
                        padding: EdgeInsets.fromLTRB(30, 10, 6, 0),
                        child:
                            Text("版本号：v1.2.9\n班级：20人工智能2班\n学号：200110900307\nWeChat：1906008151\n", style: TextStyle(fontSize: Theme.of(context).textTheme.headline6!.fontSize, color: Colors.black, height: 2.2)),

                    ),
                    // SizedBox(
                    //   height: 30,
                    // ),
                    Align(
                        alignment: Alignment.bottomRight,
                        child:
                        ButtonBar(
                            children: <Widget>[
                              FloatingActionButton.extended(
                                onPressed: () {},
                                backgroundColor: Colors.purple.shade100,
                                icon: const Icon(Icons.star),
                                label: const Text("勉勉强强98分~~"),
                              ),
                              FloatingActionButton.extended(
                                onPressed: () {},
                                backgroundColor: Colors.purple.shade100,
                                icon: const Icon(Icons.score),
                                label: const Text("必须100分！！"),
                              )
                            ]
                        )
                    )

                  ],
                ),
              ],
            ),
          )

      ),
    );



    return Scaffold(
      appBar: AppBar(
        title: const Text('个人简介'),
      ),
      body: myselfListView,
    );
  }
}