背景图片上方的 Flutter 列表视图

Question

我有一个列表视图和一个背景图像（只占用页面底部），我希望列表视图项目位于该图像下方，但它不会，有人说要使用 Stack，所以我试过了，但它仍然没有'没用。

我还尝试将图像和列表视图放在同一个脚手架中

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            color: Color.fromARGB(255, 244, 237, 222),
            image: DecorationImage(
              image: AssetImage("assets/images/fond_regions.png"),
              alignment: Alignment.bottomCenter,
              fit: BoxFit.fitWidth,
            ),
          ),
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          body: Container(
            width: double.infinity,
            height: double.infinity,
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    decoration: const InputDecoration(
                      prefixIcon: Icon(Icons.search),
                      labelText: 'Recherche de régions viticoles',
                      border: OutlineInputBorder(),
                    ),
                    onChanged: (value) {
                      setState(() {
                        _selectedRegion = value;
                      });
                    },
                  ),
                ),
                Expanded(
                  child: ListView.builder(
                    itemCount: _reg.length,
                    itemBuilder: (context, index) {
                      final region = _reg[index];
                      if (_selectedRegion == null ||
                          region
                              .toLowerCase()
                              .contains(_selectedRegion.toLowerCase())) {
                        return ListTile(
                          title: Text(
                            region,
                            style: TextStyle(fontWeight: FontWeight.bold),
                          ),
                          onTap: () {
                            Navigator.push(
                                context,
                                PageTransition(
                                  type: PageTransitionType
                                      .bottomToTopJoined,
                                  child: RegionPage(region: region),
                                  childCurrent: const ListeRegions(),
                                ));
                          },
                        );
                      } else {
                        return Container();
                      }
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

输出是这样的：

我希望它像这样（项目位于图像下方，只有小红波）：

Answer 1

使用 Stack Inside Scaffold 的身体：

return Scaffold(
        appBar: AppBar(),
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            //Your ListView
            SizedBox(
              height: MediaQuery.of(context).size.height,
              child: ListView.builder(
                itemCount: countries.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: const CircleAvatar(),
                    title: Text(countries[index]),
                  );
                },
              ),
            ),

            //Your Images
            Container(
              width: 400,
              height: 100,
              decoration: const BoxDecoration(
                color: Colors.cyan,
                borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(100),
                    topRight: Radius.circular(100),
                )
              ),
            ),
            Container(
              width: 300,
              height: 100,
              decoration: const BoxDecoration(
                  color: Colors.cyanAccent,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(100),
                    topRight: Radius.circular(100),
                  )
              ),
            )
          ],
        )
    );