Scroll 在flatter中,如何仅滚动屏幕的下半部分

Scroll 在flatter中,如何仅滚动屏幕的下半部分,scroll,flutter,Scroll,Flutter,我正在尝试创建一个UI,上面部分是剪裁视图中的图像,下面部分是一些文本内容 我尝试过用扩展的小部件扩展和包装SingleChildScrolLView,结果得到了一个白色屏幕 var DetailsScreenBottomPart = SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Padding( padding

我正在尝试创建一个UI,上面部分是剪裁视图中的图像,下面部分是一些文本内容

我尝试过用扩展的小部件扩展和包装SingleChildScrolLView,结果得到了一个白色屏幕

var DetailsScreenBottomPart = SingleChildScrollView(
    child: Column(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Padding(
        padding: EdgeInsets.all(18.0),
        child: Row(
          children: <Widget>[
            Text('Basic Information'),
            Spacer(),
            Text('See all')
          ],
        )),
    Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0, vertical: 20.0),
      child: Text(
          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna porttitor rhoncus dolor purus non enim praesent. Tristique senectus et netus et malesuada. Justo laoreet sit amet cursus sit. Nunc sed blandit libero volutpat. Donec enim diam vulputate ut pharetra sit amet. Lacus luctus accumsan tortor posuere. Mauris nunc congue nisi vitae suscipit. Commodo nulla facilisi nullam vehicula ipsum a. Fermentum posuere urna nec tincidunt praesent semper feugiat nibh sed. Ultrices sagittis orci a scelerisque. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Consequat id porta nibh venenatis. Viverra mauris in aliquam sem fringilla ut morbi. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit. Sollicitudin aliquam ultrices sagittis orci a scelerisque. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. asgdsgdsgfdsgsdfgsdgsdgsdgfsd asgsdhsdhsdh ghsh sfh sfh fsgh shg sfdh fsh sfgh j dfjsfh sfgj dfgj dfgj dfg jdfjg dfj dfjgdfj dfj dfgj d'),
    ),
  ],
));

我想要的输出非常简单,但自从我今天开始使用flutter以来,我对小部件的可用性感到有点困惑和不知所措,我可以滚动屏幕的下半部分并保持上半部分静止吗?这在颤振中甚至是可能的。

您需要使用带有2个展开子项的列。在你的第二个孩子里面保留可滚动的视图。 例如:


您需要使用包含2个展开子项的列。在你的第二个孩子里面保留可滚动的视图。 例如:

/* 只需将该小部件包装到展开的和内部展开的子SingleChildScrollView中。 */

/* 只需将该小部件包装到展开的和内部展开的子SingleChildScrollView中。 */


这对我有用!非常感谢您的回复,好先生。我所做的是,我已经将UI分为两个部分,即TopSection和BottomSection,因为您告诉我将expanded添加到这两个部分中,我只是将它们都包装在expanded中,它就工作了。你能解释一下为什么会这样,我还是一个幼稚的颤振初学者。再次感谢你。你是个救命恩人,这对我很有用!非常感谢您的回复,好先生。我所做的是,我已经将UI分为两个部分,即TopSection和BottomSection,因为您告诉我将expanded添加到这两个部分中,我只是将它们都包装在expanded中,它就工作了。你能解释一下为什么会这样,我还是一个幼稚的颤振初学者。再次感谢你。你是救命恩人。
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(),
            ),
            Expanded(
              flex: 1,
              child: Container(
                width: double.infinity,
                child: SingleChildScrollView(
                  child: Column(
                    children: <Widget>[
                      Container(height: 100, child: Text("Item 1")),
                      Container(height: 100, child: Text("Item 2")),
                      Container(height: 100, child: Text("Item 3")),
                      Container(height: 100, child: Text("Item 4")),
                      Container(height: 100, child: Text("Item 5")),
                      Container(height: 100, child: Text("Item 6")),
                      Container(height: 100, child: Text("Item 7")),
                      Container(height: 100, child: Text("Item 8")),
                      Container(height: 100, child: Text("Item 9")),
                      Container(height: 100, child: Text("Item 10")),
                    ],
                  ),
                ),
              ),
            )
          ],
        ));
  }
 return Scaffold(
  body: Container(
    child: Column(
      children: <Widget>[
        //This Container will remains constant
        Container(
          height: 300,
          color: Colors.black,
        ),
        Expanded(
          child: SingleChildScrollView(
             //This is Scrollable Container
            child: Container(
              height: 400,
              color: Colors.blue,
            ),
          ),
        )
      ],
    ),
  ),
);