带行的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'});
}