将图像添加到卡片和文本

Question

您好，我一直在构建这个应用程序，但遇到了一个我不知道如何解决的问题。我想要一排卡片小部件，它们都显示我事先提供的一些信息。这基本上就是我想做的：

``
import 'package:flutter/material.dart';

class MyClass {
  // here I am generating fake movies but you should use the data that you already have
  List<Map<String, dynamic>> movies = List.generate(
      15,
      (index) => {
            'title': 'fake title $index',
            'actors': ['fake actor $index'],
            'bannerPath': 'some/fake/path/$index',
            'description': 'some fake description $index',
          });

  List<MovieModel> get models =>
      movies.map((movie) => MovieModel.fromJson(movie)).toList();

  List<Widget> get widgets =>
      models.map((model) => MovieWidget(model: model)).toList();
}

class MovieModel {
  MovieModel({
    required this.title,
    required this.actors,
    required this.bannerPath,
    required this.description,
  });

  factory MovieModel.fromJson(Map<String, dynamic> json) {
    return MovieModel(
      title: json['title'],
      actors: json['actors'],
      bannerPath: json['bannerPath'],
      description: json['description'],
    );
  }

  String title;
  String bannerPath;
  String description;
  List<String> actors;
}

class MovieWidget extends StatelessWidget {
  const MovieWidget(
      {required this.model}); // if you decide to not make a model class, you would pass each value individually

  final MovieModel model;

  @override
  Widget build(BuildContext context) {
    // obviously this can be any widget you want
    return SingleChildScrollView(
        child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(25.0),
            ),
            elevation: 10.0,
            margin: const EdgeInsets.all(10.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 200.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    image: DecorationImage(
                        image: AssetImage(model.bannerPath), fit: BoxFit.cover),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          model.title,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                              color: Colors.redAccent,
                              fontWeight: FontWeight.w800),
                        ),
                        Text(
                          model.description,
                          softWrap: true,
                          maxLines: 4,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(fontWeight: FontWeight.w500),
                        ),
                      ]),
                ),
              ],
            )));
  }
}``
``
import 'package:flutter/material.dart';
import './header.dart';
import './image_widget.dart';
import './movies_to_watch.dart';

var movies = [
  {
    'title': '21',
    'bannerPath': 'assets/images/21_movie.jpeg',
    'description':
        '"21" is the fact-based story about six MIT students who were trained to become experts in card counting and subsequently took Vegas casinos for millions in winnings.',
    'actors': ['Kate Bosworth', 'Jim Slurgess', 'Kevvin Spacey']
  },
  {
    'title': 'Endless Love',
    'bannerPath': 'assets/images/endless_love_movie.jpeg',
    'description':
        'The story of a privileged girl and a charismatic boy whose instant desire sparks a love affair made only more reckless by parents trying to keep them apart',
    'actors': ['Alex Pettyfer', 'Gabrielle Wilde', 'Bruce Greenwood']
  },
  {
    'title': 'Kevin allein zuhaus',
    'bannerPath': 'assets/images/kevin_allein_zuhaus_movie.jpeg',
    'description':
        'Dieses Jahr fliegt die gesamte McAllister-Familie nach Frankreich, um dort gemeinsam Weihnachten zu feiern. Leider haben sie bei ihrer hektischen Abreise ihren achtjährigen Sprößling Kevin zu Hause vergessen. Dieser genießt natürlich seine neugewonnene Freiheit.',
    'actors': ['Macaulay Culkin', 'Joe Pesci', 'John Heard']
  },
  {
    'title': 'Little Woman',
    'bannerPath': 'assets/images/little_woman_movie.jpeg',
    'description':
        'rThe story follows the lives of the four March sisters—Meg, Jo, Beth, and Amy—and details their passage from childhood to womanhood. Loosely based on the lives of the author and her three sisters, it is classified as an autobiographical or semi-autobiographical novel.',
    'actors': ['Saorise Ronan', 'Timothée Chalamet', 'Florence Pugh']
  },
  {
    'title': 'Liebe braucht keine Ferien',
    'bannerPath': 'assets/images/love_movie.jpeg',
    'description':
        'Amanda ist enttäuscht von der Liebe und will nichts wie weg aus Los Angeles. Genauso geht es Iris in England. Über das Internet vereinbaren die beiden Frauen einen Häusertausch. In England trifft Amanda schon bald auf Iris attraktiven Bruder, und Iris lernt einen Arbeitskollegen von Amanda kennen.',
    'actors': [
      'Jude Law',
      'Cameron Diaz',
      'Kate Winslet',
    ]
  },
  {
    'title': 'Marvel Movies',
    'bannerPath': 'assets/images/marvel_movie.jpeg',
    'description':
        'The Marvel Cinematic Universe (MCU) is an American media franchise and shared universe centered on a series of superhero films produced by Marvel Studios.',
    'actors': [
      'Chris Evans',
      'Robert Downey Jr.',
      'Chris Hemsworth',
      'Scarlett Johansson',
    ],
  },
  {
    'title': 'Oceans 12',
    'bannerPath': 'assets/images/oceans_12_movie.jpeg',
    'description':
        'Set three years after "Ocean\'s 11," this sequel shows us Danny Ocean gathering up his complete gang of con artists and thieves from the first film in New York City before they all jet off to Amsterdam, Rome, and Paris to pull off three seperate heists.',
    'actors': [
      'George Clooney',
      'Julia Roberts',
      'Catherine Zeta-Jones',
      'Brad Pitt',
    ]
  },
  {
    'title': 'assets/images/star_movie.jpeg',
    'bannerPath': 'assets/images/star_movie.jpeg',
    'description':
        'Der in die Jahre gekommene Rockstar Jackson Maine entdeckt die talentierte Sängerin Ally und verliebt sich in sie. Ally hätte ihren großen Traum von einer Musikkarriere fast aufgegeben. Jackson fördert sie und nimmt sie schließlich sogar mit auf seine Tournee.',
    'actors': [
      'Lady Gaga',
      'Bradley Cooper',
      'Sam Elliot',
    ]
  },
  {
    'title': 'Die Entdeckung der Unendlichkeit',
    'bannerPath': 'assets/images/stephen_hawking_movie.jpeg',
    'description':
        'Bereits während seines Studiums in Cambridge erkrankt der geniale Physiker Stephen Hawking an der degenerativen Nervenkrankheit ALS. Nur die Liebe zu der Romanistikstudentin Jane Wilde gibt ihm die Kraft, nicht in Depressionen zu versinken und seine Forschungen voranzutreiben. ',
    'actors': [
      'Eddie Radmyne',
      'Felicity Jones',
      'Jane Hawking',
      'Charlie Cox',
    ]
  },
  {
    'title': 'Frühstück bei Tiffany',
    'bannerPath': 'assets/images/tiffany_movie.jpeg',
    'description':
        'Holly Golightly sucht einen reichen Ehemann, hat gutbetuchte Freunde, eine namenlose Katze und einen mittellosen Begleiter, der ihr immer aus der Patsche hilft. Ihr Traum: eine Wohnung so schön wie bei Tiffanys. Doch dann fordert der Exmann alte Rechte ein, die Polizei stellt unbequeme Fragen, und der Heiratskandidat aus Brasilien verrschwindet.',
    'actors': [
      'Audrey Hepburn',
      'George Peppard',
      'Patricia Neal',
    ],
  },
];

class Body extends StatelessWidget {
  const Body({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Padding(
            padding: EdgeInsets.only(bottom: 20.0),
            child: HeaderWidget(),
          ),
          const Padding(
            padding: EdgeInsets.only(right: 20.0, left: 20.0),
            child: FilmstoWatch(),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 20.0, left: 20.0),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: [
                  for (var movie in movies)
                    MovieWidget(model: MovieModel.fromJson(movie)),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
``

模拟器上的输出如下所示： https://drive.google.com/file/d/1nDah5cqgBLNBS69n4sJ5Xi8rtEmgWSOJ/view?usp=sharing

如何让文本显示在多行 (descriptiontext) 而不是一行中？
为什么我的 AssetImage 没有显示？

提前感谢您的帮助:)

Answer 1

您可以通过 SizedBox 或 Container 限制 Card 宽度，然后使用 maxLines 和 overflow，就像您使用的那样。

在您的 MovieWidget

中查看以下更改

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        width: 300,
        height: 305,
        child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(25.0),
            ),
            elevation: 10.0,
            margin: const EdgeInsets.all(10.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Container(
                  height: 200.0,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    image: DecorationImage(
                        image: AssetImage(model.bannerPath), fit: BoxFit.cover),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          model.title,
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(
                              color: Colors.redAccent,
                              fontWeight: FontWeight.w800),
                        ),
                        Text(
                          model.description,
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                          style: const TextStyle(fontWeight: FontWeight.w500),
                        ),
                      ]),
                ),
              ],
            )));
  }

将图像添加到卡片和文本

Adding Images to card and text

oop

maps

dart

flutter

flutter-assetimage