Блог

Мне нужно исправить минимальную ширину для моих виджетов столбцов. Внутри каждого из них у меня есть текстовые виджеты, которые могут быть очень короткими или очень длинными. Мне нужно установить для них минимальную ширину, чтобы иметь приемлемый размер столбца, даже если текст короткий. Очевидно, что другой столбец должен адаптироваться.

 Row(children: [
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 80), // do not work
        child: Text("short text"),
      ),
    ],
  ),
  Column(
    children: [
      Container(
        constraints: BoxConstraints(minWidth: 110), // do not work
        child: RichText(
          text: TextSpan(
            text:"very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
        ),
      ],
    ),
  ],
)
 

Вероятно, есть дюжина способов сделать то, что вы хотите. И, вероятно, ни один из них не является простым или понятным. (Тема ограничений и размеров довольно сложная. Смотрите Эту страницу ограничений для получения дополнительных примеров и пояснений.)

Вот одно из возможных решений.

Это установит минимальную ширину для синего столбца (на основе stepWidth ), но будет расширяться / увеличиваться, если этого захочет текст (дочерний элемент) внутри.

Размер желтого столбца будет соответствовать размеру синего столбца.

 class ExpandedRowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Page'),
      ),
      body: SafeArea(
        child: Center(
            child: Row(
              children: [
                IntrinsicWidth(
                  stepWidth: 100,
// BLUE Column
                  child: Container(
                    color: Colors.lightBlueAccent,
                      child: Column(
                        children: [
                          //Text('Short'),
                          Text('shrt')
                        ],
                      )
                  ),
                ),
// YELLOW Column
                Flexible(
                  child: Container(
                    alignment: Alignment.center,
                    color: Colors.yellow,
                      child: Column(
                        children: [
                          Text('Very lonnnnnnnnnnnnnnnnnnnnnnnnnnnng texttttttttttttt'),
                        ],
                      )
                  ),
                )
              ],
            )
        ),
      ),
    );
  }
}
 

Вы могли бы сделать вышеописанное без Flexible желтого столбца, но очень длинный дочерний текст вызовет предупреждение о переполнении без гибкого или расширенного виджета переноса.

Виджет строки сам по себе имеет ограничение на бесконечную ширину. Поэтому, если дочерний элемент хочет быть больше ширины экрана, он может и вызовет переполнение. (Попробуйте удалить Flexible выше и перестроить, чтобы увидеть.)

Гибкий и расширенный, используется только внутри строки и столбца (или Flex, их суперкласса), проверяет ширину экрана и другие виджеты внутри строки и предоставляет своим дочерним элементам определенный размер ограничения вместо бесконечного. Дочерние элементы (внутри Flexible / Expanded) теперь могут искать родительское ограничение и соответственно изменять свой размер.

Например, текстовый виджет будет переносить свой текст, когда он слишком широк для ограничений, заданных Flexible / Expanded .

используйте FittedBox();

предположим, пример:

  Row(
      children: [
        Column(
          children: [
            Container(
              constraints: BoxConstraints(minWidth: 80), // do not work
              child: Text("short text"),
            ),
          ],
        ),
        Column(
          children: [
            Container(
              constraints: BoxConstraints(minWidth: 110), // do not work
              child: 
              FittedBox(
                              child: RichText(
                    text: TextSpan(
                        text:
                            "very very longggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg text")),
              ),
            ),
          ],
        ),
      ],
    );