0

我想，在这段代码中，将 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(),
    ),
    );
  }
}

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

4

1 回答 1

2

将图标与标题和描述放在同一行，中间有一个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(),
    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'});
}
于 2020-10-12T02:46:59.080 回答