溢出时灵活滚动内容

问题描述

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

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

有人可以帮忙吗？

解决方法

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

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

,

根据您的用户界面，我认为这将是完美的，如果您需要任何更改，请告诉我。使用 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: () {},);
  }

,

您可以设置 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'))),)
    ],)