dart Flutter 向下滚动屏幕

mrfwxfqh  于 2023-04-27  发布在  Flutter
关注(0)|答案(1)|浏览(150)

我使用Flutter来建立一个配置文件屏幕.我想建立一个配置文件屏幕像Instagram的配置文件屏幕,包括多个小部件,如用户背景图像,图标,用户信息和标签栏显示用户旧帖子或用户图像,但现在我can't scroll down this screen
我希望这个屏幕可以向下滚动查看标签栏的帖子或图片,这样向下滚动后背景图片、用户图标和其他用户信息就会隐藏起来
下面是我代码的一部分

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
            height: MediaQuery.of(context).size.height *
                200, // Adjust the height according to your needs,
            child: ListView(
              padding: EdgeInsets.zero,
              children: <Widget>[
                ProfileWidget(),
              ],
            )));
  }

//include prodfile icon & profile backgroundimage 
  Widget ProfileWidget() {
    //control icon image location
    final _top = MediaQuery.of(context).size.height * 1 / 3 -
        MediaQuery.of(context).size.height / 11.5;
    final HalfWidth = MediaQuery.of(context).size.width / 2;
    //username shower
    final bottom = profileHeight / 9;
    return Stack(
        clipBehavior: Clip.none,
        alignment: Alignment.center,
        children: [
          Container(
            margin: EdgeInsets.only(bottom: bottom),
            //background image control
            child: BGIImage(),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Container(
              height: MediaQuery.of(context).size.height / 20,
              width: MediaQuery.of(context).size.width / 5,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(width: 0.8, color: Colors.white),
                  color: Colors.orange),
              child: IconButton(
                //add the function edit user icon
                onPressed: () {
                  _showSelectPhotoOptions(context);
                  //print(MediaQuery.of(context).size.height);
                  //print(MediaQuery.of(context).size.width);
                },
                icon: Icon(
                  Icons.edit,
                ),
              ),
            ),
          ),
          //Icon UI control
          Positioned(top: _top, child: IconImage()),
          Positioned(top: _top * 1.6, child: Showusername()),
          Positioned(top: _top * 1.75, child: buildContent()),
          Positioned(top: _top * 1.9, child: dynamicBadge()),
          Positioned(
              top: _top * 2.15,
              right: HalfWidth * 1.25,
              child: FollowingLayer()),
          Positioned(
              top: _top * 2.15, right: HalfWidth * 0.4, child: FollowerLayer()),
          Positioned(top: _top * 2.4, child: PostOrGallery()),
        ]);
  }

//profile icon source & UI control
  Widget IconImage() => CircleAvatar(
        radius: profileHeight / 2.3,
        child: ClipRRect(
          borderRadius: BorderRadius.circular(100),
          child: Image.network(
            _userIcon,
            errorBuilder: (context, error, stackTrace) {
              return const Icon(Icons.error);
            },
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return Center(
                child: CircularProgressIndicator(
                  value: loadingProgress.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes!
                      : null,
                ),
              );
            },
          ),
        ),
      );

//profile background image source & UI control
  Widget BGIImage() => Container(
        child: Image.network(
          _UserBGI,
          width: double.infinity,
          height: coverHeight,
          fit: BoxFit.fill,
          errorBuilder: (context, error, stackTrace) {
            return const Icon(Icons.error);
          },
          loadingBuilder: (context, child, loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded /
                        loadingProgress.expectedTotalBytes!
                    : null,
              ),
            );
          },
        ),
      );

  Widget Showusername() => Container(
        margin: EdgeInsets.only(top: 10),
        child: Text(
          _username,
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w400,
            color: Colors.black,
          ),
        ),
      );

  Widget buildContent() => Container(
        margin: EdgeInsets.only(top: 10),
        child: Text(
          _Selfintro,
          style: TextStyle(
            fontSize: 17,
            fontWeight: FontWeight.w400,
            color: Colors.black,
          ),
        ),
      );

  Widget dynamicBadge() => Container(
        margin: EdgeInsets.only(top: 10),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Icon(Icons.coffee_outlined, color: Colors.black),
            SizedBox(
              width: 5,
            ),
            Icon(
              Icons.book_outlined,
              color: Colors.black,
            ),
            SizedBox(
              width: 5,
            ),
            Icon(Icons.rocket_launch_outlined, color: Colors.black),
          ],
        ),
      );

  Widget FollowingLayer() => Container(
        // the Expanded widget lets the columns share the space
        child: Column(
          // align the text to the left instead of centered
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Following',
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
            Text(
              '10000',
              style: TextStyle(fontSize: 16, color: Colors.black),
            ),
          ],
        ),
      );

  Widget FollowerLayer() => Container(
        // the Expanded widget lets the columns share the space
        child: Column(
          // align the text to the left instead of centered
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'Follower',
              style: TextStyle(fontSize: 14, color: Colors.black),
            ),
            Text(
              '10000',
              style: TextStyle(fontSize: 16, color: Colors.black),
            ),
          ],
        ),
      );

  Widget PostOrGallery() => Container(
      height: MediaQuery.of(context).size.height *
          20, // Adjust the height according to your needs,
      width: MediaQuery.of(context).size.width,
      color: Colors.white,
      child: DefaultTabController(
        length: 2,
        child: new Scaffold(
          body: new NestedScrollView(
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                new SliverAppBar(
                  backgroundColor: ui.Color.fromARGB(255, 209, 167, 107),
                  toolbarHeight: MediaQuery.of(context).size.height / 100,
                  floating: true,
                  pinned: true,
                  snap: true,
                  bottom: new TabBar(
                    tabs: <Tab>[
                      new Tab(
                        icon: Icon(
                          Icons.content_copy_outlined,
                          color: Colors.black,
                        ),
                      ),
                      new Tab(
                          icon: Icon(
                        Icons.collections_outlined,
                      )),
                    ], // <-- total of 2 tabs
                  ),
                ),
              ];
            },
            body: new TabBarView(
              children: <Widget>[
                Center(child: CurrentUserPost()),
                Center(child: CurrentUserPost()),
              ],
            ),
          ),
        ),
      ));

谢谢观看并回答我的问题!
我一直在尝试使用 ListView,但它没有帮助

nfs0ujit

nfs0ujit1#

使用singlechildscrollView Package Scaffold小部件

相关问题