颤振：我想做一行，有两张卡片，一张图片和一个文字，如下图所示

Posted 2023-02-23

【中文标题】颤振：我想做一行，有两张卡片，一张图片和一个文字，如下图所示

【英文标题】：Flutter: i want to make a row that have two cards with an image and a text like the photo below

【发布时间】：2020-05-31 12:38:38

【问题描述】：

Flutter：我想制作一个有两张卡片的行，上面有一张图片和一条如下图所示的文字

body: groups.isEmpty
      ? Center(child: Text('No Students'))
      : ListView(
    children: [
      ...groups.map(
            (group) => Card(
            elevation: 7,
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: AssetImage('assets/01.jpg'),
              ),
              title: Text(group),
              trailing: Icon(Icons.person),

            )
            ),
      )
    ],
        )

This is The Full Code!

members image

【问题讨论】：

您好，您可以发布您的代码吗？展示您尝试实施的内容，以便我们提供帮助。

好的，我已经尝试过使用 ListView 和 ListTile " body: groups.isEmpty ? Center(child: Text('No Students')) : ListView( children: [ ...groups.map （（组）=>卡片（海拔：7，孩子：ListTile（前导：CircleAvatar（背景图像：AssetImage（'assets/01.jpg'），），标题：文本（组），尾随：图标（图标.person） , ) ), ) ], ) "

【参考方案1】：

你可以使用GridView，设置crossAxisCount等于2，然后把Column放在Card里面。

 import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: GridView.builder(
          itemCount: 6,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            childAspectRatio: 8.0 / 10.0,
            crossAxisCount: 2,
          ),
          itemBuilder: (BuildContext context, int index) 
            return Padding(
                padding: EdgeInsets.all(5),
                child: Card(
                    semanticContainer: true,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    clipBehavior: Clip.antiAlias,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Expanded(
                            child: Container(
                          decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('assets/no_image.png'),
                                fit: BoxFit.fill),
                          ),
                        )),
                        Padding(
                            padding: EdgeInsets.all(10.0),
                            child: Text(
                              "Name",
                              style: TextStyle(fontSize: 18.0),
                            )),
                      ],
                    )));
          ,
        ));
  

【讨论】：

嗨！我现在从颤振开始。是否可以像 android 中的 RecycleView 一样将项目加载到这个列表视图中？谢谢。

列出 vew 懒惰？我猜你的意思是ListView？