带行的 IconButton

Question

我想在此代码中将 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,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    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(),
    ),
    );
  }
}

Update ：我添加了一个 Spacer() 并将所有内容放在同一行中，并将 CrossAxisAlignment 设置为 .center.

Answer 1

将图标与标题和描述放在同一行，中间有一个 Spacer()。这会给你一个溢出错误，因为 Spacer 想要在物理上尽可能多地占据 space ，所以它没有限制地继续到无穷大。要告诉 Spacer 它只允许有限量的 space，您必须将行的 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(),
    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'});
}

带行的 IconButton

IconButton with Row

flutter

dart

row

iconbutton