Flutter: ListTile前置图片尺寸太小。

7

当我把图片放在ConstrainedBox里的ListTile leading中时,我遇到了图片大小的问题,图片太小了,无法填充到更大的尺寸。有什么方法可以使此图片大小跟随Card的高度?

谢谢。

Listview with Card

ListTile(
                        leading: ConstrainedBox(
                            constraints:
                                BoxConstraints(minWidth: 100, minHeight: 100),
                            child: Image.network(
                              'http://www.malmalioboro.co.id/$gambar',
                              width: 100,
                              height: 100,
                            )),
                        title: Text(
                          nama,
                          style: TextStyle(
                              fontSize: 20.0, fontWeight: FontWeight.bold),
                        ),
                        subtitle: Column(
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Text(
                                  'Barcode : ',
                                  style: TextStyle(fontWeight: FontWeight.bold),
                                ),
                                Text(
                                  deskripsi,
                                  style: TextStyle(fontSize: 15.0),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Text(
                                  'Harga : ',
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 20),
                                ),
                                Text(
                                  harga,
                                  style: TextStyle(fontSize: 20),
                                )
                              ],
                            ),
                          ],
                        ),
                      ),
1个回答

4

使用自定义小部件而不是ListTile。

创建自己的ListTileCustom来实现您想要的功能;)

通过使用Container、Column和Row等组件,您可以制作像这样的东西(这只是一个示例,请勿使用此快速糟糕的代码;)):

输入图像描述

    import 'package:flutter/material.dart';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }

    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;

      @override
      _MyHomePageState createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: ListView.builder(
              itemCount: 15,
              itemBuilder: (context, index) {
                return Card(
                  clipBehavior: Clip.antiAlias,
                  child: Container(
                    height: 120,
                    padding: const EdgeInsets.all(0),
                    child: Row(children: [
                      Expanded(
                        flex: 6,
                        child: Container(
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://live.staticflickr.com/3780/9134266649_3d2f1af95b_z.jpg'),
                                  fit: BoxFit.fill)),
                        ),
                      ),
                      Spacer(
                        flex: 1,
                      ),
                      Expanded(
                        flex: 14,
                        child: Container(
                          padding: const EdgeInsets.only(top: 5),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: <Widget>[
                              Text("Title",
                                  style: TextStyle(
                                      fontSize: 20.0, fontWeight: FontWeight.bold)),
                              Row(
                                children: <Widget>[
                                  Text(
                                    'Barcode : ',
                                    style: TextStyle(fontWeight: FontWeight.bold),
                                  ),
                                  Text(
                                    "barcode",
                                    style: TextStyle(fontSize: 15.0),
                                  ),
                                ],
                              ),
                              Row(
                                children: <Widget>[
                                  Text(
                                    'Harga : ',
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold, fontSize: 20),
                                  ),
                                  Text(
                                    'harga',
                                    style: TextStyle(fontSize: 20),
                                  )
                                ],
                              ),
                              Align(
                                alignment: Alignment.bottomRight,
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: <Widget>[
                                    FlatButton(
                                        onPressed: null,
                                        child: Text("DETAIL ITEM")),
                                    FlatButton(
                                        onPressed: null, child: Text("BELI")),
                                  ],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ]),
                  ),
                );
              }),
        );
      }
    }

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接