如何使整个页面在 flutter 中可滚动

Question

我想让整个页面在 flutter 中可滚动，同时内部每个元素的高度保持动态。现在这两个 Expanded 元素具有固定高度并且可以垂直滚动 - 我想让它们延伸到它们的常规高度并能够向下滚动到下一个元素。

body: Scaffold(
    body: Column(
      children: <Widget>[
        Text(),
        IntrinsicHeight(   //This is fixed height and doesn't move
          child: Text(),
        ),
        new Divider(height: 0.1),
        Text(),
        Expanded(          //This is now vertically scrollable in its own box
            child: Text()
        ),
        Expanded(          //This is now vertically scrollable in its own box
            child: Text()
        ),
      ],
    ),
  ),

我厌倦了在 SingleChildScrollView 中包装第一列的几个版本，但由于某种原因它不起作用。

Answer 1

用 SingleChildScrollView() 包裹你的列，所以 select 列而不是用小部件包裹它是 SingleChildScrollView()

Answer 2

使用 IntrinsicHeight 小部件包装您的 Column 小部件。然后用 SingleChildScrollView.

包装 IntrinstHeight

这对我来说很好

  body: SingleChildScrollView(
    child: IntrinsicHeight(
      child: Column(
        children: <Widget>[
          Text("tes"),
          IntrinsicHeight(   //This is fixed height and doesn't move
            child: Text("tes"),
          ),
          new Divider(height: 0.1),
          Text("tes"),
          Expanded(          //This is now vertically scrollable in its own box
              child: Text("tes")
          ),
         Expanded(          //This is now vertically scrollable in its own box
              child: Text("tes")
          ),
        ],
      ),
    ),
  ),

注意：将代码放在Scaffold body里面

Answer 3

试试下面的代码希望对你有帮助。将 Column() 包裹在 IntrinsicHeight() 小部件中，

参考IntrinsicHeighthere

参考SingleChildScrollView here，此小部件用于滚动小部件。。

return Scaffold(
  body: SingleChildScrollView(
    child: IntrinsicHeight(
      child: Column(
        children: <Widget>[
          Text(
            'Try',
          ),
          IntrinsicHeight(
            child: Text(
              'Done',
            ),
          ),
          new Divider(height: 0.1),
          Text(
            'data',
          ),
          Expanded(
            child: Text(
              'Okk',
            ),
          ),
          Expanded(
            child: Text(
              'Yes',
            ),
          ),
        ],
      ),
    ),
  ),
);

如何使整个页面在 flutter 中可滚动

How to make the entire page in flutter scrollable

scroll

dart

flutter