Question

我正在尝试创建一个UI，其中上部是剪切视图中的图像，而下部是一些文本内容。

我尝试用Expanded Widget扩展并包装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'),
    ),
  ],
));

我想要的输出非常简单，但是自从我今天开始颤抖以来，由于小部件的可用性，我有点困惑和不知所措，我可以滚动屏幕的下半部分并使上半部分保持静态吗？甚至在扑朔迷离中也是可能的。

Answer 1

您需要使用带有2个扩展子级的列。在您的第二个孩子里面，保留可滚动视图。例如：

  @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")),
                    ],
                  ),
                ),
              ),
            )
          ],
        ));
  }

Answer 2

/ * 只需将该小部件包装到Expanded中，然后在其内部扩展一个子SingleChildScrollView。 * /

 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,
            ),
          ),
        )
      ],
    ),
  ),
);

在颤动中如何仅滚动屏幕的下半部分

2 个答案: