如何自动缩放小部件以适应不同的屏幕尺寸？

Question

我有一个包含 ListTile 的卡片 ListView，在每个列表图块中我都有标题和副标题，我尝试在多部手机（android/ios）上调试我的应用程序。对于其中一些手机，字幕文本会溢出卡片小部件，因为它们的屏幕较小。有没有办法根据屏幕尺寸有效地适应我的文本小部件？

Answer 1

问题是您正在使用 ListTile 来处理它们不适合的东西。

根据 material.io 的说法，listTile最多有 3 行文本。 https://material.io/guidelines/components/lists.html#lists-usage

改用适合内容的卡片。

Answer 2

您可以将 maxLines 和溢出属性分配给 Text 小部件：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const String _longText = 'Lorem ipsum dolor sit amet, consectetur adip'
      'iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna '
      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor'
      'is nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep'
      'rehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu'
      'r. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui off'
      'icia deserunt mollit anim id est laborum.';
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      body: new Card(
          child: new ListTile(
        title: const Text('Title'),
        subtitle: const Text(
          _longText,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
      )),
    );
  }
}