如何在窗口小部件中放置小部件或使其与容器上的列重叠?

时间:2020-04-01 11:07:59

标签: flutter flutter-layout

enter image description here

我想在颤抖中实现这样的目标 我曾尝试跟随,但我无法解决这个问题

  Stack(
                  overflow: Overflow.visible,
              children: <Widget>[
                    Container(
                      height: 250,
                      margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                      padding: EdgeInsets.fromLTRB(0, 60, 0, 0),
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: AssetImage("assets/bacground_img.png"),
                          fit: BoxFit.fill,
                        ),
                      ),
                      child: Column(
                        children: <Widget>[
                          GestureDetector(
                            child: Container(
                              margin: EdgeInsets.all(10),
                              //  padding: EdgeInsets.only(left: 10, right: 10),
                                padding: EdgeInsets.only(left: 0, right: 0),
                                color: Colors.transparent,
                                child: IgnorePointer(
                                    child: TextFormField(
                                      style: TextStyle(),
                                      controller: searchcc,
                                      decoration: InputDecoration(
                                          focusedBorder: OutlineInputBorder(
                                            borderRadius: BorderRadius.all(Radius.circular(0.0)),
                                            borderSide:
                                            BorderSide(color:  Colors.white, width: 1.0),
                                          ),
                                          enabledBorder: OutlineInputBorder(
                                            borderRadius: BorderRadius.all(Radius.circular(0.0)),
                                            borderSide:
                                            BorderSide(color: Colors.white, width: 1.0),
                                          ),
                                          prefixIcon:
                                          Icon(Icons.search, color: Colors.white),
                                          hintText: 'Search here',
                                          hintStyle: TextStyle(color:  Colors.white),
                                          contentPadding: EdgeInsets.zero),
                                    ))),
                            onTap: () async {
                              final int selected = await showSearch<int>(
                                context: context,
                                delegate: _delegate,
                              );
                              if (selected != null && selected != _lastIntegerSelected) {
                                setState(() {
                                  _lastIntegerSelected = selected;
                                });
                              }
                            },
                          ),
                          Padding(
                            padding:
                            const EdgeInsets.only(left: 10.0, top: 15.0, bottom: 0.0),
                            child: Text('My to-do list',
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 18.0,
                                    fontFamily: "MicrosoftSansSerif",
                                    fontWeight: FontWeight.normal)),
                          ),
                        ],
                      ) /* add child content here */,
                    ),
                Positioned(
                  top: 200.0,
                  left: 10.0,
                  right: 10.0,
                  child:     GestureDetector(
                    child: Container(
                        width: MediaQuery.of(context).size.width,

                        margin:
                        const EdgeInsets.only(top: 10.0, right: 10.0, left: 10),
                        padding: const EdgeInsets.only(
                            right: 10.0, left: 10.0, top: 10.0, bottom: 10.0),
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey.shade300, width: 1.0),
                          borderRadius: BorderRadius.all(Radius.circular(
                              10.0) //                 <--- border radius here
                          ),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            list,
                            Padding(
                              padding: const EdgeInsets.only(top: 8.0, bottom: 8),
                              child: Container(
                                height: 0.5,
                                color: Colors.grey.shade300,
                              ),
                            ),
                            todo_succ != false
                                ? Text("View all",
                                style: TextStyle(
                                    color: Color(0xFF0378d7),
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.normal))
                                : Text("Add to list > ",
                                style: TextStyle(
                                    color:Color(0xFF0378d7),
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.normal)),
                          ],
                        )),
                    onTap: () {
                      Navigator.of(context).push(new MaterialPageRoute(
                          builder: (BuildContext context) => ToDolistCustomer(
                            show: true,
                          )));
                    },
                  ),
                ),
]),

从上面的代码中,定位的小部件设置得很好,但是我看不到其余部分,如图所示,其余部分未显示请帮助!

我需要将一列与多个列表重叠,但是我不知道如何实现???

enter image description here

1 个答案:

答案 0 :(得分:0)

我已经在您列表的容器中添加了一种颜色。

Container(
    width: MediaQuery.of(context).size.width,
    margin: const EdgeInsets.only(top: 10.0, right: 10.0, left: 10),
    padding: const EdgeInsets.only(
        right: 10.0, left: 10.0, top: 10.0, bottom: 10.0),
    decoration: BoxDecoration(
      //added color
      color: Colors.white,
      border: Border.all(color: Colors.grey.shade300, width: 1.0),
      borderRadius: BorderRadius.all(
          Radius.circular(10.0) //                 <--- border radius here
          ),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        ListView.builder(
          itemCount: 3,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 8.0),
                  child: Text('Item #$index'),
                ),
                Divider(
                  height: 8,
                )
              ],
            );
          },
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Text("Add to list > ",
              style: TextStyle(
                  color: Color(0xFF0378d7),
                  fontSize: 15.0,
                  fontWeight: FontWeight.normal)),
        ),
      ],
    ));

此外,您可以使用Divider小部件代替Container来分隔列表。