flutter - 如果没有定义宽度和高度，SingleChildScrollView 内的容器不会显示

Question

我有一个结构如下的脚手架：

body : Column(
children : [
Expanded(
  child : SingleChildScrollView(
  Container (
    Column( 
    //content
    )
  )
  )
),
BottomMenu()
]
)

问题是，如果我没有为 SingleChildScrollView 中的 Container 定义宽度和高度，则内容不会显示，但是如果我定义了高度，那么我的 childscrollview 的高度将不会与内容一起动态工作，我希望高度适合我的容器内的内容，所以我可以滚动到内容的末尾。我对此仍然很陌生，因此任何建议和建议将不胜感激。谢谢

Answer 1

最好使用堆栈而不是列作为顶部小部件，如下所示：

Stack(
  children: <Widget>[
    SingleChildScrollView(
      Container (
        Column( 
          //content
        )
      )
    ),
    Align(
      alignment: Alignment.bottomCenter,
      child: BottomMenu(),
    ),
 ],
)

这对你有帮助吗？

Answer 2

Your layout isn't best practice, try:

return Scaffold(
      body: LayoutBuilder(builder: (context, constraints) {
      return SingleChildScrollView(
        child: Container(
          width: constraints.maxWidth,
          height: constraints.maxHeight,
          child: Column(
            children: [
              //your content
            ],
          ),
        ),
      );
    }));

This makes a container which is the size of the screen, and it contains a column which will scroll with all the content.

Answer 3

I could not understand what exactly the issue is. But I could give some idea.

Try something like this,

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            color: Colors.blue,
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.9,
            child: SingleChildScrollView(
              child: Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height,
                child: ListView(
                  children: [
                    Row(
                      children: [
                        Container(
                          margin: const EdgeInsets.only(bottom: 10.0),
                          height: 100.0,
                          width: 100.0,
                          color: Colors.red,
                        ),
                      ],
                    ),
                     
                    
                    ....
                    
                  ],
                ),
              ),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.1,
            child: BottomMenu(),
          ),
        ],
      ),
    );
  }

Hope that solves your issue.