在恒定大小的容器内滚动小部件 flutter web

Question

各位开发者大家好，

我正在使用 flutter web SDK 在 flutter 中开发一个响应式网页，但我卡在了页面的一部分，我在行内有一行我有 2 个容器，其中我希望第一个容器是可滚动，第二个容器大小不变（不可滚动），就像 whatsapp web ui，其中联系人列表不断滚动，但聊天端和页面的其余部分不会滚动。

请帮助我， 提前致谢...

Answer 1

这应该可行您需要一个固定大小的容器，并确保其中应包含一个可滚动的小部件。现在可以通过使用媒体查询参数和下面的代码来响应大小，您只需要调整 space 和大小就可以了。

Row(
              //Your parent Row
              children: [
                Container(
                  //static non scrollable container
                  child: Column(
                    children: [
                      //Children you want to add 
                      //this wont be scrollable 
                      //It is also preferred that you give this some height or width too
                    ],
                  ),
                ),
                Container(
                  //Scrollable container
                  //Please adjust height and width yourself 
                  //You can use media query parameters to make it responsive
                  width: 200,
                  height: 500,
                  child: SingleChildScrollView(
                    //You can also change the scroll direction
                    child: Column(
                      //Add children you want to be in
                      //Scrollable column
                      
                    ),
                  ),
                )
              ],
            ),