如何将视图置于列表视图之上? [英] How to put view above the list view?

问题描述

我有一个列表视图，该视图平均分为两部分(作为背景)如何在其上方放置一个视图(100 * 100 w * h)?(此框应居中对齐并与根的顶部对齐)

I have a listview which is equally divided into two parts(act as a background) How can i put a view above it( 100*100 w*h )?(This box should center align & top of root)

这是我尝试过的代码-

  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: ListView(
          children: <Widget>[
            Container(
              width: ((context.findRenderObject() as RenderBox).size.width),
              height: ((context.findRenderObject() as RenderBox).size.height)/2,
              color: darkGreen,
            ),
          //  SizedBox(width: 10,),
            Container(
              width: ((context.findRenderObject() as RenderBox).size.width),
              height: ((context.findRenderObject() as RenderBox).size.height)/2,
              color: Colors.grey,
            ),
          ],
        ),
      );
    }
  }

推荐答案

首先，您不需要此行:

((context.findRenderObject() as RenderBox).size.width)

您可以将其替换为:

double.infinity

，它将采用父级Widget可以允许的最大宽度.

and it will take the maximum width the parent Widget can allow.

关于您的问题，您可以将ListView包裹在Stack中:

as for your question, you can wrap your ListView in a Stack:

Container(
      width: double.infinity,
      height: double.infinity,
      child: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Container(
                width: double.infinity,
                height:
                    ((context.findRenderObject() as RenderBox).size.height) / 2,
                color: darkGreen,
              ),
              //  SizedBox(width: 10,),
              Container(
                width: double.infinity,
                height:
                    ((context.findRenderObject() as RenderBox).size.height) / 2,
                color: Colors.grey,
              ),
            ],
          ),

          //place your desired widget here
        ],
      ),
    ),

这篇关于如何将视图置于列表视图之上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！