如何解决带行的IconButton
我想用这段代码将IconButton放在每个ItemView的右上角。 ItemDescription和ItemTitle在顶部居中。我尝试将它们放在同一行中,但是我无法将它们放在一起,因为IconButton粘在文本上还是在中间。 我认为这很容易,但是我没有找到解决方案。
代码如下:
import 'package:Flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';
import 'package:watch/constants.dart';
class ListViewExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ListViewExampleState(
);
}
}
class ListViewExampleState extends State<ListViewExample>{
List<Container> _buildListItemsFromItems(){
int index = 0;
return item.map((item){
var container = Container(
decoration: index % 2 == 0?
new Boxdecoration(color: const Color(0xFFFFFFFF)):
new Boxdecoration(
color: const Color(0xFFFAFAF5)
),child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(5.0),child: new CachednetworkImage(
imageUrl: item.imageURL,width: 200.0,height: 100.0,fit: BoxFit.cover,),Expanded(
child: Row(
children: <Widget>[
new Row(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 75.0 ),child: Text(
item.title,style: kItemTitle,Container(
padding: const EdgeInsets.only(left: 15.0),child:Text(
item.description,style: kItemDescription,],new Row(
mainAxisAlignment: MainAxisAlignment.end,children: <Widget>[
Container(
child: IconButton(
icon: Icon(Icons.favorite_border,color: Colors.black,iconSize: 24.0,onpressed: null
),)
],)
]),]),);
index = index + 1;
return container;
}).toList();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Accueil',style: kAppBarStyle,backgroundColor: Colors.white,elevation: 0,body: ListView(
children: _buildListItemsFromItems(),);
}
}
更新:我添加了一个Spacer()
并将它们放在同一行中,并将CrossAxisAlignment设置为.center。
解决方法
将图标与标题和说明放在同一行中,并在两者之间使用Spacer()。然后,这将给您带来溢出错误,因为Spacer希望在物理上占用尽可能多的空间,因此不受限制地将其继续到无穷大。要告诉Spacer仅允许有限的空间,您必须将行的mainAxisSize设置为MainAxisSize.min
这是代码,进行了一些修改,因此我能够自己运行它。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ListViewExample(),);
}
}
class ListViewExample extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new ListViewExampleState();
}
}
class ListViewExampleState extends State<ListViewExample> {
var items = [
Item(),Item(),];
List<Container> _buildListItemsFromItems() {
int index = 0;
return items.map(
(item) {
var container = Container(
decoration: index % 2 == 0
? new BoxDecoration(color: const Color(0xFFFFFFFF))
: new BoxDecoration(color: const Color(0xFFFAFAF5)),child: new Row(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(5.0),child: new Container(
color: Colors.red,width: 150.0,height: 100.0,),Expanded(
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: <Widget>[
Container(
padding: const EdgeInsets.only(bottom: 75.0),child: Text(
item.title,Container(
padding: const EdgeInsets.only(left: 15.0),child: Text(
item.description,Spacer(),GestureDetector(
child: Icon(
Icons.favorite_border,size: 14,color: Colors.black,onTap: null,],);
index = index + 1;
return container;
},).toList();
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Accueil'),backgroundColor: Colors.white,elevation: 0,body: ListView(
children: _buildListItemsFromItems(),);
}
}
class Item {
final String title;
final String description;
Item({this.title = 'FooTitle',this.description = 'BarDescription'});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。