Как создать расширяемую границу для чтения при наличии переполнения - PullRequest
Новая
       30

Как создать расширяемую границу для чтения при наличии переполнения

1 голос
/ 02 февраля 2020

У меня есть контейнер, содержащий текст. Контейнер ограничен размером половины экрана. Иногда их много, и это приводит к переполнению текста. В случае переполнения я бы хотел, чтобы контейнер расширялся. Каков наилучший способ создания расширяемого контейнера в случае переполнения?

Код выглядит следующим образом: 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Document Overview')),
    body: Container(
      constraints: BoxConstraints(
        minWidth: MediaQuery.of(context).size.width,
        minHeight: 100,
        maxHeight: MediaQuery.of(context).size.height / 2,
      ),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.black)),
      ),
      child: Column(
        children: [
          Expanded(
            child: Column(
              children: [
                Text('Some text', style: TextStyle(fontSize: 24)),
                SizedBox(height: 16),
                Text(
                  'Some more text',
                  style: TextStyle(fontSize: 16),
                  overflow: TextOverflow.fade,
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}

1 Ответ

0 голосов
/ 02 февраля 2020

Установите minHeight: MediaQuery.of(context).size.height / 2 и удалите maxHeight: ....

Установите mainAxisSize: MainAxisSize.min в обоих Column.

Используйте Flexible вместо Expanded.

Это может помочь, 

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Document Overview')),
    body: Container(
      constraints: BoxConstraints(
        minWidth: MediaQuery.of(context).size.width,
        minHeight: MediaQuery.of(context).size.height / 2,
      ),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        border: Border(bottom: BorderSide(color: Colors.black)),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Flexible(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Some text', style: TextStyle(fontSize: 24)),
                SizedBox(height: 16),
                Text(
                  '${List.generate(70, (_) => "Some more text ").join()}',
                  style: TextStyle(fontSize: 16),
                  overflow: TextOverflow.fade,
                )
              ],
            ),
          )
        ],
      ),
    ),
  );
}
...