flutter - 滚动列表视图时如何更改边框半径？

Question

我正在做一个关于颤振的项目，我的 listView 有问题。

当我向下滚动提要时，我的列表视图半径看起来像这样（边框在两张照片的正下方）：

所以基本上我想要的是将两张照片作为浮动照片和最新的帖子放在它下面。

但我希望列表看起来像这样：

有人对这个问题有任何想法吗？

检查下面的代码：

              Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        left: 20.0, right: 20.0, top: 10.0, bottom: 20.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Expanded(
                          child: TeamImageContainer(
                            data: data[0],
                            onNavigate: () {
                              Navigator.of(context).pushNamed(
                                  TeamStatisticViewScreen.routeName,
                                  arguments: data[0].id);
                            },
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: TeamImageContainer(
                            data: data[1],
                            onNavigate: () {
                              Navigator.of(context).pushNamed(
                                  TeamStatisticViewScreen.routeName,
                                  arguments: data[1].id);
                            },
                          ),
                        ),
                      ],
                    ),
                  ),
                  Expanded(
                    child: SingleChildScrollView(
                      child: Column(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                              // color: Colors.black38,
                              gradient: LinearGradient(
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                                colors: [Colors.transparent, Colors.black38],
                                stops: [-0.1, 0.5],
                                tileMode: TileMode.clamp,
                              ),
                              borderRadius: BorderRadius.only(
                                  topLeft: Radius.circular(20),
                                  topRight: Radius.circular(20.0)),
                            ),
                            margin: const EdgeInsets.only(top: 20.0),
                            child: Column(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(
                                      right: 20,
                                      left: 20,
                                      bottom: 20.0,
                                      top: 20.0),
                                  child: SizedBox(
                                    width: double.infinity,
                                    child: Align(
                                      alignment: Alignment.topLeft,
                                      child: Text(
                                        'Latest Posts',
                                        style: TextStyle(
                                          color: Color(0xffe0e6f3),
                                          fontSize: 18,
                                          fontFamily: 'SFProText',
                                          fontWeight: FontWeight.w600,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                                Column(
                                  children: _postsData.loadedLatestPosts
                                      .map(
                                        (data) => PostsListWidget(data),
                                      )
                                      .toList(),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),

Answer 1

据我所知，您需要专注于绘制背景的类/元素。另外，考虑在 const 文件中声明边界半径，这样您就不必不断地对值进行硬编码，您只需为您的 boxDecorationStyle 调用“boxCurve”EG。

在不知道绘制了哪些元素以及在哪里绘制的情况下，实际上很难查明代码中的问题，如果您可以共享 GitHub 链接，那么它可能会有所帮助:)

尝试这个 ：）

           Container(
              decoration: const BoxDecoration(
                // color: Colors.black38,
                gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [Colors.purple, Colors.blue],
                  stops: [-5, 0.5],
                  tileMode: TileMode.clamp,
                ),
                borderRadius: BorderRadius.only(
                    bottomLeft: Radius.circular(5),
                    bottomRight: Radius.circular(5),
                    topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)),
              ),
              margin: const EdgeInsets.only(
                top: 10.0,
                bottom: 10,
                left: 3,
                right: 3,
              ),
              child: Column(
                children: const [
                  Padding(
                    padding: EdgeInsets.only(
                        right: 20, left: 20, bottom: 20.0, top: 20.0),
                    child: SizedBox(
                      child: Align(
                        alignment: Alignment.topLeft,
                        child: Text(
                          'Latest Posts',
                          style: TextStyle(
                            color: Color(0xffe0e6f3),
                            fontSize: 18,
                            fontFamily: 'SFProText',
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ),
                  ),

我的结果

这也是我之前对你的风格的意思-

例如，创建一个名为 constants 的新 dart 文件...

导入“包：颤振/material.dart”；

const kLatestPosts = TextStyle（颜色：颜色（0xffe0e6f3），fontSize：18，fontFamily：'SFProText'，fontWeight：FontWeight.w600，）；

将其复制到常量文件中+在您正在处理的文件上导入文件，替换样式：TextStyle（用样式：kLatestPosts，现在您的代码更整洁+性能也更好:)