flutter - 图片未显示在 ListView 中
问题描述
我知道代码有点乱,还在学习中。
我已将图像放在 BoxDecoration 之外,但注意到出现了。RUN 中没有任何内容显示为错误。我猜它与 ListView 内的容器有关,但无法找出它为什么是空白的。
import 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0.0,
title: Text("App"),
),
body: SafeArea(
child: Container(
height: 80,
decoration: new BoxDecoration(
color: Colors.blue,
borderRadius: new BorderRadius.only(
bottomLeft: const Radius.circular(40.0),
bottomRight: const Radius.circular(40.0))
),
child: ListView(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
width: 120,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey[300],
offset: Offset(1, 1),
blurRadius: 0
),
], // BoxShadow
borderRadius: BorderRadius.all(Radius.circular(20))
),
child: ListTile(
leading: Icon(Icons.search, color: Colors.red),
title: TextField(
decoration: InputDecoration(
hintText: "What stuff do you want to seach for?",
hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
border: InputBorder.none
),
),
trailing: Icon(Icons.filter_list, color: Colors.red),
),
),
SizedBox(height: 5),
Container(
height: 220,
width: 220,
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.red,
offset: Offset(1, 1),
blurRadius: 4
),
],
),
child: Image.asset("assets/images/1.jpg"),
),
],
),
),
],
),
),
)
);
}
}
解决方案
我将结构更新为带有两个孩子的列:
Container
带有 TextField的蓝色- 与
ListView
图片
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: Home(),
),
);
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(elevation: 0.0, title: Text("App")),
body: SafeArea(
child: Column(
children: [
Container(
padding: EdgeInsets.all(20.0),
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40.0),
bottomRight: Radius.circular(40.0),
),
),
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20.0),
),
child: const ListTile(
leading: Icon(Icons.search),
title: TextField(
decoration: InputDecoration(
hintText: "What stuff do you want to seach for?",
hintStyle: TextStyle(fontSize: 16, color: Colors.grey),
border: InputBorder.none,
),
autofocus: true,
),
trailing: Icon(Icons.filter_list),
),
),
),
SizedBox(
height: 120.0,
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
children: List.generate(
20,
(index) => Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset("assets/images/cartoon.jpg"),
),
),
),
),
],
),
),
);
}
}
推荐阅读
- android - 饼图 - 如何删除饼图上的 x 标签并在其旁边显示 ite?
- timestamp - 有没有办法将用户消息与 slack 中的自定义 Bot 响应链接起来,而无需线程化消息?
- haskell - Emacs Haskell Intero 问题
- python - Pygame中的按键不起作用
- java - 在 VisualVM 内存分析中选择记录分配堆栈跟踪选项时应用程序崩溃
- java - 使用 org.apache.commons.vfs.FileObject.copyFrom() 时出现 Java SFTP 错误
- django - 无法从 Django Docker 实例内部访问项目绝对 URL
- c# - 使用 C# WMI 和 acronis 映像的相同硬件 ID
- ngx-uploader - Angular 5 的支持版本是什么
- java - 使用 Java 1.8 构建并在 Java 1.7 中部署