flutter - 如何缩小ListTile中的图像而不展开它？

Question

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

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

我该怎么做？提前致谢。

我尝试将图像放入 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'),
        ],
    );
}
}

Answer 1

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

....

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

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