Question

我想要一个具有灵活主体（红色）高度和固定按钮高度（灰色）的容器。完整的容器应尽可能小并具有最大高度。如果内容超出最大高度，则它应该是可滚动的。

我是 flutter 的新手，所以我不知道如何实现这一点。我尝试使用具有 maxHeight 的 ConstraintBox，但是当内容较小时，整个容器会比它必须更大。

return Container(
  child: Column(
    children: [
      ConstrainedBox(
        maxHeight: 400
        child: //SomeWidget that could overflow 
      ),
      Container(
        height: 150,
        child: Center(
          child: TextButton(child: Text('OK'))
        ),
      )
    ],
  ),
);

有人可以帮忙吗？

Answer 1

我现在用那个代码实现了：

Container(
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Flexible(
          child: SingleChildScrollView(
              child: //SomeWidget that could overflow
          ),
        ),
        Container(
          alignment: Alignment.bottomCenter,
          child: TextButton(
            child: Text('OK')
          )
        )
      ]
    )
  )

Answer 2

根据您的用户界面，我认为这将是完美的，如果您需要任何更改，请告诉我。使用 constraints 更改大小。

 final widgets = List.generate(
    12,
    (index) => Container(
      height: 100,
      color: index % 2 == 0 ? Colors.cyanAccent : Colors.greenAccent,
      child: Text("item  $index"),
    ),
  );
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Stack(
          children: [
            Align(
              alignment: Alignment.topCenter,
              child: SizedBox(
                ///* used 90% of screen for items
                height: constraints.maxHeight * .9,
                child: ListView(
                  children: [
                    Center(child: Text("inside listView")),

                    ///your widgets
                    ...widgets,
                    Center(child: Text("End of  listView")),
                  ],
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: Container(
                color: Colors.grey.withOpacity(.3),

                ///* used 10% of screen for Button
                height: constraints.maxHeight * .1,
                child: Center(
                  child: TextButton(
                    child: Text('OK'),
                    onPressed: () {},
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Answer 3

您可以设置 constraints 的 Container。您也可以使用 Flexible 和 SingleChildScrollView

Container(
  constraints: BoxConstraints(
    maxHeight: 300,
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Flexible(
          child: SingleChildScrollView(
        child: Column(
          children: [
            //SomeWidget that could overflow 
          ],
        ),
      )),
      Container(
        color: Colors.amber,
        height: 150,
        child:
            Center(child: TextButton(onPressed: () {}, child: Text('OK'))),
      )
    ],
  ),
)

溢出时灵活滚动内容

3 个答案: