如何缩小 ListTile 中的图像但不展开它？

Posted 2023-02-23

【中文标题】如何缩小 ListTile 中的图像但不展开它？

【英文标题】：How to shrink images in ListTile but not expand it?

【发布时间】：2019-09-23 02:32:11

【问题描述】：

我需要在 ListView 中显示几种不同尺寸的图像。

当图像大于 screen.width 时，我希望它缩小以适应宽度。 但是当图像较短时，我希望它保持原来的大小。

我该怎么做？提前致谢。

我尝试将 Image 放入 Flex 中，但无法“阻止”小图片展开。

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:firebase_database/firebase_database.dart';

void main() => runApp(MyApp());

const _imagesDir = "images";

class MyApp extends StatelessWidget 
// This widget is the root of your application.
@override
Widget build(BuildContext context) 
    return MaterialApp(
        title: 'Image List',
        theme: ThemeData(primarySwatch: Colors.blue,),
        home: MyListPage(title: 'Image List Page'),
    );



class MyListPage extends StatefulWidget 
MyListPage(Key key, this.title) : super(key: key);

final String title;

@override
_MyListPageState createState() => _MyListPageState();


class _MyListPageState extends State<MyListPage> 

Widget build1(BuildContext context, AsyncSnapshot snapshot) 

    Widget _tileImagem(BuildContext context, String imageName) 
            imageName = _imagesDir + "/"+ imageName;
            return Padding(padding:EdgeInsets.all(2.0), 
                child: Flex(
                    direction: Axis.vertical,
                    children: <Widget>[
                        Image.asset(imageName),
                    ]
                ),
            );

    

    return Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(40.0),
            child: AppBar(
                title: Row(
                    children: <Widget> [
                        Padding(padding: EdgeInsets.only(right: 20.0),),
                        Text( 'Duda'), 
                    ]),
            )
        ),
        body: ListView(
            shrinkWrap: true,
            children: <Widget>[
                Container(),
                _tileImagem(context, 'flutter_big_medium.png'),
                Container(), //My App have some different widgets 
                Container(),
                Container(), //I kept them here just as place holder
                Container(),
                Container(),
                Container(),
                Container(),
                Container(),
                Divider(),
                TileTexts(),
                Divider(),
            ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: ()  ,
            child: Icon(Icons.skip_next),
        ),
    ); 


@override
Widget build(BuildContext context) 
    return new FutureBuilder(
        future: 
            FirebaseDatabase.instance.reference()
                .child('Testing')
                .once(),
        builder: (BuildContext context, AsyncSnapshot snapshot) 
            switch (snapshot.connectionState)
                case ConnectionState.done: return build1(context, snapshot);
                case ConnectionState.waiting: return CircularProgressIndicator();
                default:
                    if (snapshot.hasError) 
                        return Text("hasError: $snapshot.error");
                     else 
                        return Text("$snapshot.data");
                    
                                            
        
    );



class TileTexts extends StatefulWidget 

TileTexts() : super();

@override
_TileTextsState createState() => _TileTextsState();


class _TileTextsState extends State<TileTexts> 

@override
void initState() 
    super.initState();


    Widget text1(String title, String imageName, TextStyle style) 
        return Expanded(
            child:Container(
                margin: const EdgeInsets.only(left: 10.0),
                child: Column(
                    children: <Widget>[
                        Html(data: title, 
                            useRichText: true,
                            defaultTextStyle: style,
                        ),
                        ((imageName == null))
                            ? Container()
                            : Image.asset(_imagesDir + "/"+imageName),
                    ]
                ),
            ),
        );
    

    Widget _tileDetail(BuildContext context, String imageName) 
        return Container(
            padding: EdgeInsets.fromLTRB(5.0,0.0,10.0,0.0),
            child: Row(
                children: <Widget>[ 
                    Material(
                        shape: RoundedRectangleBorder(borderRadius:BorderRadius.circular(22.0) ),
                        clipBehavior: Clip.antiAlias,
                        child: MaterialButton(
                            child: Text('X'),
                            color: Theme.of(context).accentColor,
                            elevation: 8.0,
                            height: 36.0,
                            minWidth: 36.0,
                            onPressed: () 
                                //
                            ,
                        ),
                    ),
                    text1('<body>veja a imagem</body>', imageName, Theme.of(context).textTheme.caption),
                ],
            ),
        );
    

//_TileTexts
@override
Widget build(BuildContext context) 
    print('_TileTexts build');
    return Column(
        children: <Widget>[
            _tileDetail(context, 'flutter_med_medium.png'),
            Divider(),
            _tileDetail(context, 'flutter_med_medium.png'),
            Divider(),
            _tileDetail(context, 'flutter_med_medium.png'),
        ],
    );

【参考方案1】：

创建一个方法getTitleImage(imageName)，如果图像大于屏幕尺寸则返回Flex，否则返回容器内的图像或其他小部件选择。

....

return Padding(padding:EdgeInsets.all(2.0), 
       child: getTitleImage(imageName)
      ),
);
....

这里有一些其他提示和技巧using Flex

【讨论】：

查看ListTile中如何缩小图片:api.flutter.dev/flutter/material/ListTile-class.html

【参考方案2】：

请查看doc，上面写着：

前导和尾随小部件的高度根据材质规范进行限制。单行 ListTiles 可访问性例外。请参阅下面的示例，了解如何遵守材料规范和可访问性要求。

阅读完文档后，你应该实现你想要的:)