即使使用所有位置参数，定位的小部件也不会滚动

Question

我想让个人资料页面的一些信息可以滚动。对于布局，我使用了一个堆栈作为父窗口小部件，并用 Positioned Widgets 填充它。我用所有位置参数填充了 Positioned Widget，这样当我把它放在屏幕中间时我可以滚动它。似乎我将小部件向下推得越深，滚动的区域就越小。直到该区域消失。

最后一个定位小部件是我想要使其可滚动的那个。我也将它与修复数字一起使用，但没有帮助。

我是编程新手，所以我希望能把我的问题说清楚。预先感谢您帮助我。

这是我的代码：

    return Scaffold(
      appBar: AppBar(
        elevation: 2,
        leading: BackButton(onPressed: () {
          Navigator.pop(context,
              MaterialPageRoute(builder: (context) => eventHomeScreen()));
        }),
        backgroundColor: Colors.teal,
        title: Text('Leute', style: TextStyle(fontSize: 28)),
        actions: [
          IconButton(
            iconSize: 26,
            icon: Icon(Icons.chat),
            tooltip: 'Chat-Anfrage schicken',
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) => chatRequestSentScreen.withUser(user)));
            },
          )
        ],
      ),
      body: Stack(
        alignment: Alignment.bottomCenter,
        clipBehavior: Clip.none,
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width * 1,
            height: MediaQuery.of(context).size.height * .35,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: user.getProfilePicture(),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Positioned(
            bottom: -MediaQuery.of(context).size.height * 0.19,
            child: Card(
              color: Colors.teal.shade50,
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              )),
              elevation: 0,
              child: Container(
                width: MediaQuery.of(context).size.width * 1,
                height: MediaQuery.of(context).size.height * 0.26,
                child: Column(
                  children: [
                    Text(
                      user.getFullName(),
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 24,
                      ),
                    ),
                    Text(user.getCurrentAge().toString() + " Jahre",
                        style: TextStyle(
                          fontSize: 22,
                        )),
                    Text('Zuletzt aktiv: Heute',
                        style: TextStyle(
                          color: Colors.grey,
                          fontSize: 16,
                        )),
                    SizedBox(
                      height: 10,
                    ),
                    Container(
                      margin: EdgeInsets.symmetric(horizontal: 20),
                      padding:
                          EdgeInsets.symmetric(horizontal: 30, vertical: 5),
                      child: Text(user.getBio(),
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            fontSize: 20,
                          )),
                    ),
                    SizedBox(
                      height: 50,
                    ),
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            top: MediaQuery.of(context).size.height * 0.45,
            left: 0.0,
            right: 0.0,
            bottom: -MediaQuery.of(context).size.height * 0.55,
            child: Container(
              decoration: BoxDecoration(
                  color: Colors.black87,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(40),
                    topRight: Radius.circular(40),
                  )),
                width: MediaQuery.of(context).size.width * 1,
                height: MediaQuery.of(context).size.height * 0.4,
                child:
                Container(
                        margin: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
                        padding:
                            EdgeInsets.symmetric(horizontal: 30, vertical: 5),
                        child: SingleChildScrollView(
                          physics: AlwaysScrollableScrollPhysics(),
                          child: Column(
                            children: SharedScreenFeatures.getSports(
                                user.getSports()),
                          ),
                        ),
                ),
              ),
            ),
        ],
      ),
    );
  }
}```

Answer 1

只要将容器包裹在 SingleChildScrollView

中就可以了

Answer 2

子窗口小部件继承了父窗口小部件的约束。我添加了一个高度为 double.infinity 的父容器。另外 segment_two 容器我设置的最小高度为 150 否则你会给出像素溢出。请注意您的尺码比例。

class TestPositioned extends StatefulWidget {
  TestPositioned({Key? key}) : super(key: key);
  @override
  State<TestPositioned> createState() => _TestPositionedState();
}
class _TestPositionedState extends State<TestPositioned> {
  segment_one(BuildContext context)
  {
          return Container(
            width: MediaQuery.of(context).size.width * 1,
            height: MediaQuery.of(context).size.height * .35,
            decoration: BoxDecoration(
              border:Border.all(color:Colors.grey)),
              child:FittedBox(
                fit:BoxFit.fitHeight,
              child:SizedBox(
                width:200,
                height:200,
                child: Image.asset("assets/images/apple.jpg"),
              ),
            ),
          );
  }
  segment_two(BuildContext context)
  {
    return 
          Positioned(
            bottom: -MediaQuery.of(context).size.height * 0.01,
            child: 
            
            Container(
                width: MediaQuery.of(context).size.width * 1,
                height: MediaQuery.of(context).size.height * 0.26>150?MediaQuery.of(context).size.height * 0.26:150,
                
                  child:Card(
                      color: Colors.teal.shade50,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(40),
                          topRight: Radius.circular(40),
                  )),
                  elevation: 0,
                       child: Column(
                      children: [
                            Expanded(child:Text("full Name", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 24, ),)),
                            Expanded(child:Text("current age" + " name",style: TextStyle(fontSize: 22,))),
                            Expanded(child:Text('abcdefg: hijklmn',style: TextStyle(color: Colors.grey,fontSize: 16,))),
                            SizedBox(height: 10,),
                            
                            Container(margin: EdgeInsets.symmetric(horizontal: 10),
                              padding:EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                              child: 
                              Expanded(child:Text("bio",maxLines: 3,overflow: TextOverflow.ellipsis,textAlign: TextAlign.center,
                              style: TextStyle( fontSize: 20,)))
                              )
                              ,
                            SizedBox(height: 10,),
                  ],
                ),
              )));

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: Text("Stacked Position")),body:
    Container(
          height: double.infinity,child:Stack(
      children: [
      segment_one(context),
      segment_two(context),
   ],)));
  }
}

Answer 3

我解决了它，这花了我很长时间，但现在它可以完美地满足我的目的。我仍在使用堆栈，但为了将内容推送到需要的地方，我使用了一个透明容器。现在 MediaQuery 不再是负数了。可能不是完美的答案，但它确实有效。

return Scaffold(
  backgroundColor: Colors.teal.shade50,
  appBar: AppBar(
    elevation: 2,
    leading: BackButton(onPressed: () {
      Navigator.pop(context,
          MaterialPageRoute(builder: (context) => eventHomeScreen()));
    }),
    backgroundColor: Colors.teal,
    title: Text('Leute', style: TextStyle(fontSize: 28)),
    actions: [
      IconButton(
        iconSize: 26,
        icon: Icon(Icons.chat),
        tooltip: 'Chat-Anfrage schicken',
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
              builder: (context) => chatRequestSentScreen.withUser(user)));
        },
      )
    ],
  ),
  body: Stack(
    children: [
      Column(children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * .33,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: user.getProfilePicture(),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ]),
      Positioned(
        top: MediaQuery.of(context).size.height * .27,
        child: Container(
          decoration: BoxDecoration(
              color: Colors.teal.shade50,
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(40),
                topRight: Radius.circular(40),
              )),
          width: MediaQuery.of(context).size.width * 1,
          child: Column(
            children: [
              Text(
                user.getFullName(),
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 24,
                ),
              ),
              Text(user.getCurrentAge().toString() + " Jahre",
                  style: TextStyle(
                    fontSize: 22,
                  )),
              Text('Zuletzt aktiv: Heute',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 16,
                  )),
            ],
          ),
        ),
      ),
      SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(),
        child: Column(
          children: [
            Container(
              height: MediaQuery.of(context).size.height * .39,
              color: Colors.transparent,
            ),
            Container(
              height: MediaQuery.of(context).size.height * .15,
              width: MediaQuery.of(context).size.width * 1,
              color: Colors.teal.shade50,
              padding: EdgeInsets.symmetric(horizontal: 15, vertical: 0),
              child: SingleChildScrollView(
                physics: AlwaysScrollableScrollPhysics(),
                child: Text(
                   user.getBio(),
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height * .4,
              width: MediaQuery.of(context).size.width *1 ,
              decoration: BoxDecoration(
                  color: Colors.black87,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(40),
                    topRight: Radius.circular(40),
                  )),
              child: Container(
                margin: EdgeInsets.symmetric(horizontal: 20, vertical: 0),
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
                child: SingleChildScrollView(
                  physics: AlwaysScrollableScrollPhysics(),
                  child: Column(
                    children:
                        SharedScreenFeatures.getSports(user.getSports()),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

即使使用所有位置参数，定位的小部件也不会滚动

Positioned Widget is not scrolling even with all positional arguments

frontend

flutter

flutter-layout