1

我需要在 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'),
        ],
    );
}
}
4

2 回答 2

1

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

....

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

以下是使用 Flex的一些其他提示和技巧

于 2019-05-05T08:37:36.617 回答
0

请检查文档，它说：

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

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

于 2020-03-29T05:07:15.990 回答