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

Question

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

Answer 1

您可以将maxLines和overflow属性分配给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,
        ),
      )),
    );
  }
}

Answer 2

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

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

请使用适合内容的卡片。