flutter - Flutter 在卡片内创建图像和文本
问题描述
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(
body: new Column(
children: <Widget>[
Card(
child: Image(
image: new AssetImage('assets/cardbg.png'),
fit: BoxFit.cover,
),
color: Colors.white,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(5),
),
new Text('hjsdgshagdjadh'),
],
),
));
我正在使用 Image 和 textview 创建 carview。我想要卡片左侧的文本和卡片右侧的圆形图像,并且我想为卡片设置背景图像。在卡片下方我想要带有文本和复选框的 Listview .如果选择任何复选框,则所选项目应出现在cardview的右侧。在android中我做了所有这些事情,但我不知道如何在flutter中实现相同的功能。
解决方案
您似乎需要有关屏幕布局的帮助。到目前为止,您是否尝试过任何事情,是否遇到过任何特殊问题?我建议阅读文档以了解有关在 Flutter 中使用布局的更多信息。
对于您的用例,这里是关于我们如何在屏幕上布置小部件的一般视图。为了简单起见,本概述中不包含对齐和填充的容器。
Column
- Card
- Column
- Row
- Column
- Text
- Text
- Image
- Text
- ListView
- Card
- Row
- Text
- Checkbox
如果选中任何复选框,则所选项目应出现在卡片视图的右侧。
当勾选复选框时,我不太确定所需的输出。如果您可以提供更多详细信息,我也许可以提供一些指导。
在此示例中,复选框中的值存储在 HashMap 中。您可以根据自己的用例进行更改。
这是您可以使用的示例代码。
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> {
Map<String, bool> checkboxValues = {
'List CheckBox 1': false,
'List CheckBox 2': false,
'List CheckBox 3': false,
'List CheckBox 4': false,
'List CheckBox 5': false,
'List CheckBox 6': false,
'List CheckBox 7': false,
'List CheckBox 8': false,
'List CheckBox 9': false,
};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: new Column(
children: <Widget>[
Card(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
children: [
Row(
children: [
Expanded(
flex: 3,
child: Container(
alignment: Alignment.topLeft,
child: Column(
children: [
Text('Text 1'),
Container(
height: 24,
width: 0,
),
Text('Text 2'),
],
),
),
),
Expanded(
flex: 1,
child: Image(
height: 60,
image: AssetImage('assets/image.png'),
),
),
],
),
Container(
padding: EdgeInsets.fromLTRB(0, 24, 0, 0),
alignment: Alignment.topLeft,
child: Text('Text 3'),
),
],
),
),
color: Colors.white,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(5),
),
Expanded(
flex: 3,
child: ListView(
children: checkboxValues.keys.map((key) {
return Card(
child: Container(
margin: EdgeInsets.all(18),
child: Row(
children: [
Text(key),
Checkbox(
onChanged: (bool value) {
setState(() {
// store new val of key on HashMap
checkboxValues[key] = value;
});
},
value: checkboxValues[key],
),
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(5),
);
}).toList(),
),
),
],
),
);
}
}
应用程序运行时的外观
推荐阅读
- sql-server - SSIS:多个源到一个目标表
- ansible - 无法通过 ansible playbook SSH 到远程主机
- java - org.postgresql.util.PSQLException: ERREUR: erreur de syntaxe sur ou près de « $2 » 位置:40
- r - Swap key and label in ggplot legend
- variations - 如何根据类似于 BAYC 或其他 NFT 收藏品的各种艺术资产以编程方式生成艺术变体?
- python - 我希望能够搜索我输入的名称并获得分数
- php - PHPUnit 测试实际上运行代码而不是仅仅测试
- python - Python如何捕获由数字后跟多个测量单位中的任何一个组成的模式
- visual-studio - 在 dev 中设置具有项目依赖项的 .net5 库项目的正确方法,但在发布时将 nuget 包分开
- php - 导入大数据时哪种方法更实用或更正统?