Question

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


        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

Answer 1

设置背景色为绿色ins脚手架并设置透明色为链接然后尝试

Answer 2

所以我认为这发生在您身上，因为您使用的是 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 Design 布局结构，它还用 Material 包装您的代码，以便您可以使用它的好处。

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

Read more about Scaffold

给您的另一个提示是使用 Icon() 而不是导入您自己的图像，原因有以下三个：

做起来超级简单，你只要写Icon(Icons.search)，就搞定了
图标是可缩放和可修改的，您可以更改大小、颜色
他们支持 Material Design

如果用 Icon 包裹 IconButton，您可以立即获得一个带有点击动画的漂亮按钮。

阅读更多关于 Icon 和 IconButton

List of Icons

如果您想制作自定义列表图块，请尝试将其作为您的 ListViews itemBuilder：

         return Padding(
                        padding: const EdgeInsets.fromLTRB(0, 0, 0, 8),
                        child: Container(
                          decoration: BoxDecoration(
                              border: Border.all(
                                  color: Colors.black38.withOpacity(0.2)),
                              borderRadius:
                                  BorderRadius.all(Radius.circular(20))),
                          child: Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text(
                              dList[index],
                              style: TextStyle(
                                fontSize: 25,
                              ),
                            ),
                          ),
                        ),
                      );

结果：

如果你用 Container 包裹东西，它会进入它的身体内部，那么你可以用圆形边框、颜色、边框等装饰这个容器。

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

2 个答案: