【问题标题】:how to change the border-radius while scrolling my list-view?滚动列表视图时如何更改边框半径?
【发布时间】:2022-01-13 13:19:32
【问题描述】:

我正在做一个关于颤振的项目,我的 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(),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),

【问题讨论】:

  • 能否包含PostsListWidget或示例代码-sn-p
  • 我只是添加了更多代码和对我想要的内容的更多解释。

标签: flutter dart listview containers border-radius


【解决方案1】:

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

在不知道绘制了哪些元素以及在哪里绘制的情况下,实际上很难查明代码中的问题,如果您可以共享 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,
                          ),
                        ),
                      ),
                    ),
                  ),

MyResult

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

例如创建一个名为常量的新 dart 文件...

导入'package:flutter/material.dart';

const kLatestPosts = TextStyle( 颜色:颜色(0xffe0e6f3), 字体大小:18, fontFamily: 'SFProText', 字体重量:字体重量.w600, );

将常量文件复制到其中+在您正在处理的文件上导入文件,替换样式:TextStyle( 风格:kLatestPosts, 现在你的代码也更整洁了 + 性能也更好了 :)

【讨论】:

  • 我只是添加了更多代码和对我想要的内容的更多解释
  • 我也认为这可能与宽度为无穷大有关,它无法测量 SizedBox 的左上角/右上角的位置
  • material.io/components/cards/flutter#card 考虑使用卡片代替容器
猜你喜欢
  • 1970-01-01
  • 2020-10-11
  • 1970-01-01
  • 1970-01-01
  • 2016-06-03
  • 1970-01-01
  • 2021-11-17
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多