如何在颤振应用程序中剪切列表？答案

【问题标题】：How to cut list in flutter application?如何在颤振应用程序中剪切列表？
【发布时间】：2021-06-15 19:47:30
【问题描述】：

我想制作一个笔记应用程序，但我遇到了一个问题。当我不滚动我的列表时，它看起来很棒（对我来说）但是当我滚动它时，绿色背景移动到应用程序的顶部，我想剪切它并制作固定大小。我还想让这个列表更加自定义，在元素之间留出更大的边距并将形式更改为圆角矩形


        body: Stack(
          fit: StackFit.expand,
          children: <Widget>[
            Positioned(
              top: 0.0,
              child: Row(
                children: <Widget>[
                  Container(
                    child: Text(
                      "Notes",
                      style: TextStyle(
                        color: Color.fromRGBO(107, 119, 141, 1),
                        fontSize: 72,
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 50),
                    child: Text(
                      "Never Settle",
                      style: TextStyle(
                        fontSize: 12,
                        color: Color.fromRGBO(107, 119, 141, 0.25),
                      ),
                    ),
                  ),
                  SizedBox(width: 20),
                  Container(
                    child: Image.asset(
                      'assets/images/magnifier.png',
                      height: 44,
                      width: 44,
                    ),
                  ),
                  SizedBox(width: 30),
                  Container(
                    child: Image.asset(
                      'assets/images/3dot.png',
                      height: 44,
                      width: 44,
                    ),
                  ),
                ],
              ),
            ),
            Positioned(
              top: 75.0,
              child: ListView.builder(
                itemCount: dList.length,
                itemBuilder: (context, index) {
                  return Ink(
                      color: Colors.green,
                      child: ListTile(
                        title: Text(
                          dList[index],
                          style: TextStyle(
                            fontSize: 25,
                          ),
                        ),
                      )
                  );
                },
              ),
            ),
            Positioned(
              height: 55,
              width: 55,
              // top:0.0,
              right: 20.0,
              bottom: 20.0,
              child: Image.asset(
                'assets/images/plus.png',
                height: 22,
                width: 22,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

enter image description here enter image description here

【问题讨论】：

能否请您展示您真正想要制作的屏幕？

标签： flutter dart

【解决方案1】：

所以我认为这发生在您身上，因为您使用的是 Stack 小部件。它看起来不错，直到您移动列表，因为实际上它漂浮在您的顶部栏上。

我建议您使用 Scaffold 和 Column，这是您修改后的代码：

Scaffold(
    body: Container(
      color: Colors.blue,
      child: Column(
        children: <Widget>[
          SizedBox(height: 50),
          Container(
            color: Colors.indigo,
            child: Row(
              children: <Widget>[
                Container(
                  child: Text(
                    "Notes",
                    style: TextStyle(
                      color: Color.fromRGBO(107, 119, 141, 1),
                      fontSize: 72,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(top: 50),
                  child: Text(
                    "Never Settle",
                    style: TextStyle(
                      fontSize: 12,
                      color: Color.fromRGBO(107, 119, 141, 0.25),
                    ),
                  ),
                ),
                SizedBox(width: 20),
                Container(
                  child: Icon(Icons.search, size: 40, color: Colors.red),
                ),
                SizedBox(width: 30),
                Container(
                  child: Icon(Icons.menu, size: 40, color: Colors.red),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.green,
              child: ListView.separated(
                separatorBuilder: (BuildContext context, int index) =>
                    const Divider(),
                itemCount: dList.length,
                itemBuilder: (context, index) {
                  return Ink(
                      color: Colors.green,
                      child: ListTile(
                        title: Text(
                          dList[index],
                          style: TextStyle(
                            fontSize: 25,
                          ),
                        ),
                      ));
                },
              ),
            ),
          ),
        ],
      ),
    ),
    floatingActionButton:
        FloatingActionButton(onPressed: () => {}, child: Icon(Icons.add)),
  )

以及它的样子：

scaffold 的作用是为您提供完美的材料设计布局结构，它还使用 Material 包装您的代码，因此您可以使用它的好处。

Scaffold 还为您提供了设置 FloatingActionButton 的机会，您可以在代码底部找到它，看看它是多么简单，您无需创建自己的圆形按钮 - 它已经提供。