Question

我尝试了几种不同的方法，但是我无法使用它。我想要实现的布局非常简单，并且在本机Android中实现起来轻而易举：

顶部固定的容器（蓝色）
下方的可滚动容器（红色）。 ListView在我的情况下不起作用。

我尝试使用SingleChildScrollView，但似乎无法在Column内使用。也许我做错了什么，或者我没有使用正确的小部件...

我的结果：

Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      SingleChildScrollView(
        child: Container(
          color: Colors.red,
          padding: EdgeInsets.all(20.0),
          child: Column(
            children: <Widget>[
              Text('Red container should be scrollable'),
              Container(
                width: double.infinity,
                height: 700.0,
                padding: EdgeInsets.all(10.0),
                color: Colors.white.withOpacity(0.7),
                child: Text('I will have a column here'),
              )
            ],
          ),
        ),
      ),
    ],
  ),
)

Answer 1

将其添加到SingleChildScrollView中。

field

Answer 2

问题是Column小部件不支持滚动。为了使其工作，您可以切换到ListView，但是当前的实现缺少节的某种标题。为了获得它们，您可以使用sticky_headers软件包，如下所示：

Widget build(BuildContext context) => Scaffold(
      body: new ListView.builder(
          itemCount: 1,
          padding: EdgeInsets.zero,
          itemBuilder: (context, index) {
            return new StickyHeader(
                header: Container(
                  height: 100.0,
                  color: Colors.blue,
                ),
                content: Container(
                  color: Colors.red,
                  padding: EdgeInsets.all(20.0),
                  child: Column(
                    children: <Widget>[
                      Text('Red container should be scrollable'),
                      Container(
                        width: double.infinity,
                        height: 700.0,
                        padding: EdgeInsets.all(10.0),
                        color: Colors.white.withOpacity(0.7),
                        child: Text('I will have a column here'),
                      )
                    ],
                  ),
                ));
          }));

Answer 3

我设法使用class A { methodA() { console.log('method of A'); } doesMethodBelongHere(method) { // it should return true if `method` argument is a method of A return Object.values(this).includes(method); } } const a = new A(); console.log(a.doesMethodBelongHere(a.methodA)); // should return true来实现工作布局，唯一的缺点是，如果我有Stack并向下滚动，游标“气泡”就会显示在顶部容器上方...这有点丑陋。 TextField中我的小部件的顺序不会对此造成影响。

See screenshot

Stack

Answer 4

我认为也许一年后您就可以做到这一点。

但是对于其他寻求相同问题的人，最简单的方法是将SingleChildScrollView包装在Expanded小部件中。

Widget build(BuildContext context) =>
Scaffold(
  body: Column(
    children: <Widget>[
      Container(
        height: 100.0,
        color: Colors.blue,
      ),
      Expanded(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.red,
            padding: EdgeInsets.all(20.0),
            child: Column(
              children: <Widget>[
                Text('Red container should be scrollable'),
                Container(
                  width: double.infinity,
                  height: 700.0,
                  padding: EdgeInsets.all(10.0),
                  color: Colors.white.withOpacity(0.7),
                  child: Text('I will have a column here'),
                )
              ],
            ),
          ),
        ),
      ),
    ],
  ),
);

列内的可滚动容器

4 个答案: