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),
)
),
)
],
)
解决方案
您可以使用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),
)),
],
)));
},
));
}
}
推荐阅读
- java - 如何修复此错误消息:xhr.js:178 GET http://localhost:8080/jpa/users/undefined/accounts/undefined?
- php - 我不断收到此错误:第 8 行的语法错误,意外 ':',期待 ')'
- python - 使用“子进程调用”调用未知目录中的程序
- laravel - 基于 Laravel API 的验证/身份验证
- python - 奇怪的 GUDHI + rpy2 交互
- c - 我想在 C 中创建一个链表并对其执行某些功能。但在我的代码中找不到错误
- css - bootstrap row-cols-sm-1 不适用于卡片。应该为 1 的单元格屏幕上出现两张卡片
- visual-studio-code - SUMX 为所有行提供相同的值
- c# - 更新 BSON 文档添加一条新记录 C# ,然后更新新记录
- windows - 从哪里获得适用于 Windows 的最新 GCC 版本