草庐IT

dart - 在 flutter 中创建卡片和标题

coder 2023-07-24 原文

请问我如何使用 flutter 实现上面的图片。一个带有文本的卡片 View ，并将其放在水平的 listview.builder 中，以便用数据填充它。

  ListView homeList(){
var listView = ListView(
  shrinkWrap: true,
  children: <Widget>[
    _imageSlider(),

    Padding(
      padding: EdgeInsets.only(top: 15.0, bottom: 15.0, left: 15.0),
      child: Text("Trending", style: TextStyle(color: Colors.white, fontSize: 15.0),),
    ),

   Container(
     child: FutureBuilder(
       future: _trendingListImages(),
         builder: (BuildContext context, AsyncSnapshot async){
           if(async.data == null){
           return ColorLoader3(
          radius: 20.0,
          dotRadius: 5.0,
           );
          }else{
            return ListView.builder(
              shrinkWrap: true,
              scrollDirection: Axis.horizontal,
                itemCount: async.data.length,
                itemBuilder: (BuildContext context, int position){
                      return Card(
                        child: ListTile(
                          title:Image.network(
                                "http://image.tmdb.org/t/p/w500/"+async.data[position].backdropPath,),


                          subtitle: Text(async.data[position].title),
                        )
                      );
                }
            );
           }
         }
     ),
   )
  ],
);

return listView;

这是我尝试过的方法，但它似乎没有用，我已经尝试了几个小时，但似乎无法正常工作。非常感谢您的帮助。

最佳答案

您需要修改您的 ListView.builder，同样可以使用 - Column

示例代码 - 您可以对其进行编辑以匹配您的字段

return ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: 25,
        itemBuilder: (BuildContext context, int position) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Card(
                elevation: 18.0,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(10.0))),
                child: Image.network(
                  'https://placeimg.com/640/480/any',
                  fit: BoxFit.cover,
                  height: 200.0,
                  width: 130.0,
                ),
                clipBehavior: Clip.antiAlias,
                margin: EdgeInsets.all(8.0),
              ),
              Text(
                'Film Title',
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
              )
            ],
          );
        });

输出:

关于dart - 在 flutter 中创建卡片和标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54771933/

中创建卡sectionimagecodedartflutter

有关dart - 在 flutter 中创建卡片和标题的更多相关文章

  1. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  2. ruby-on-rails - Rails - 从另一个模型中创建一个模型的实例 - 2

    我有一个正在构建的应用程序，我需要一个模型来创建另一个模型的实例。我希望每辆车都有4个轮胎。汽车模型classCar轮胎模型classTire但是，在make_tires内部有一个错误，如果我为Tire尝试它，则没有用于创建或新建的activerecord方法。当我检查轮胎时，它没有这些方法。我该如何补救？错误是这样的:未定义的方法'create'forActiveRecord::AttributeMethods::Serialization::Tire::Module我测试了两个环境:测试和开发，它们都因相同的错误而失败。 最佳答案

  3. ruby - 如何在 Ruby 中创建无类 DSL？ - 2

    我正在尝试找出如何为我的Ruby项目创建一种“无类DSL”，类似于在Cucumber步骤定义文件中定义步骤定义或在Sinatra应用程序中定义路由。例如，我想要一个文件，其中调用了我的所有DSL函数:#sample.rbwhen_string_matches/hello(.+)/do|name|call_another_method(name)end我认为用我的项目特有的一堆方法污染全局(内核)命名空间是一种不好的做法。因此方法when_string_matches和call_another_method将在我的库中定义，并且sample.rb文件将以某种方式在我的DSL方法的上下文中

  4. ruby-on-rails - 如何在 Rails 3 中创建自定义脚手架生成器？ - 2

    有这些railscast。http://railscasts.com/episodes/218-making-generators-in-rails-3有了这个，你就会知道如何创建样式表和脚手架生成器。http://railscasts.com/episodes/216-generators-in-rails-3通过这个，您可以了解如何添加一些文件来修改脚手架View。我想把两者结合起来。我想创建一个生成器，它也可以创建脚手架View。有点像RyanBates漂亮的生成器或web_app_themegem(https://github.com/pilu/web-app-theme)。我

  5. ruby - 为什么在 ruby​​ 中创建 Rational 不需要新方法 - 2

    这个问题在这里已经有了答案:关闭10年前。PossibleDuplicate:Rubysyntaxquestion:Rational(a,b)andRational.new!(a,b)我正在阅读ruby镐书，我对创建有理数的语法感到困惑。Rational(3,4)*Rational(1,2)产生=>3/8为什么Rational不需要new方法(我还注意到例如我可以在没有new方法的情况下创建字符串)？

  6. ruby - 在 Ruby 中创建按公共(public)键值分组的新哈希 - 2

    假设我有一个在Ruby中看起来像这样的哈希:{:ie0=>"Hi",:ex0=>"Hey",:eg0=>"Howdy",:ie1=>"Hello",:ex1=>"Greetings",:eg1=>"Goodday"}有什么好的方法可以将它变成如下内容:{"0"=>{"ie"=>"Hi","ex"=>"Hey","eg"=>"Howdy"},"1"=>{"ie"=>"Hello","ex"=>"Greetings","eg"=>"Goodday"}} 最佳答案 您要求一个好的方法来做到这一点，所以答案是:一种您或同事可以在六个月后理解

  7. ruby - 如何跳过 CSV 文件的第一行并将第二行作为标题 - 2

    有没有办法跳过CSV文件的第一行，让第二行作为标题？我有一个CSV文件，第一行是日期，第二行是标题，所以我需要能够在遍历它时跳过第一行。我尝试使用slice但它会将CSV转换为数组，我真的很想将其读取为CSV，以便我可以利用header。 最佳答案 根据您的数据，您可以使用另一种方法和skip_lines-option此示例跳过所有以#开头的行require'csv'CSV.parse(DATA.read,:col_sep=>';',:headers=>true,:skip_lines=>/^#/#Markcomments!)do|

  8. ruby-on-rails - 在 Rails 中创建自定义方法 - 2

    我正在尝试找到解决此问题的好方法。假设我有一个包含帖子、标题和不同状态ID的表格。在我的Controller索引中，我有:@posts=Post.all然后在我的模型中我有:defcheck_status(posts)posts.eachdo|post|#logichereendend所以在我的Controller中我有:@posts.check_status(@posts)但我在加载索引时遇到以下错误:undefinedmethodcheck_statusfor有什么想法吗？ 最佳答案 它应该是一个类方法，以self.为前缀:de

  9. ruby-on-rails - 为什么我不能在 Rails 的表格中创建一个数组作为列？ - 2

    为什么我不能这样做:classCreateModels是否有其他方法可以使数组(“apples”)成为Fruit类实例的属性？ 最佳答案 在Rails4中并使用PostgreSQL，您实际上可以在数据库中使用数组类型:迁移:classCreateSomething 关于ruby-on-rails-为什么我不能在Rails的表格中创建一个数组作为列？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/qu

  10. ruby-on-rails - 如何在 Rails 5 中创建 ActiveRecord 无表模型？ - 2

    我尝试创建新模型，该模型在数据库中没有表的情况下具有自动类型转换。我试图从ActiveRecord::Base继承它抛出异常ActiveRecord::StatementInvalid:PG::UndefinedTable:ERROR:relation"people"doesnotexist类实现:classPerson堆栈跟踪:ActiveRecord::StatementInvalid:PG::UndefinedTable:ERROR:relation"people"doesnotexistLINE8:WHEREa.attrelid='"people"'::regclass^:SE

随机推荐