Flutter Web实现行内多Text组件按行宽均等收缩并显示省略号

Got it, let's fix this layout step by step. The core issues with your current approach are how space is allocated between flexible and fixed elements, and how we control when text truncation kicks in. Here's the breakdown and working code:

Key Fixes Explained #

• Replace Flexible with Expanded: Flexible allows its child to take less space than available, which is why you saw ellipses early. Expanded forces the child to fill the assigned space, ensuring truncation only happens when space is truly exhausted.
• Assign equal flex values: Giving each text container the same flex ensures they shrink evenly when space runs out.
• Group fixed right-side elements: Wrap the count numbers and button in a way that keeps them as a cohesive fixed-size unit, so the button stays aligned to the right edge at all times.
• Add minWidth constraints: Prevent text containers from shrinking below a reasonable minimum (like the natural width of the text) until space is really tight.

Working Code #

import 'package:flutter/material.dart';

void main() { runApp(const App()); }

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Row(
        children: [
          // Name text container with equal flex and min width
          Expanded(
            flex: 1,
            child: Padding(
              padding: const EdgeInsets.only(right: 20),
              child: ConstrainedBox(
                constraints: const BoxConstraints(minWidth: 100), // Adjust based on your text length
                child: Text(
                  'Some name here',
                  style: Theme.of(context).textTheme.headline5,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
            ),
          ),
          // Uses count container with equal flex
          Expanded(
            flex: 1,
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 80),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'Uses count:',
                    style: Theme.of(context).textTheme.subtitle2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    '4',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 16),
          // Attachments count container with equal flex
          Expanded(
            flex: 1,
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 120),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text(
                    'Attachments count:',
                    style: Theme.of(context).textTheme.subtitle2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(width: 8),
                  Text(
                    '0',
                    style: Theme.of(context).textTheme.bodyText1,
                  ),
                ],
              ),
            ),
          ),
          const SizedBox(width: 16),
          // Fixed button aligned to right
          OutlinedButton(
            onPressed: () {},
            child: const Text('Some action'),
          ),
        ],
      ),
    );
  }
}

How This Fixes Your Issues #

1. Ellipses only show when space is exhausted: The ConstrainedBox with minWidth keeps each text container at its natural size until the window is small enough that the combined min widths of all flexible elements exceed the available space. Only then do they start shrinking, and ellipses appear when the text can't fit.
2. Equal shrinkage: All three Expanded widgets have flex: 1, so they'll lose space at the exact same rate as the window shrinks.
3. Button stays aligned right: By placing the fixed button alongside the flexible text containers, the main Row will push the button to the far right once the flexible elements have taken all the space they can without truncating prematurely.

内容的提问来源于stack exchange，提问作者xbalaj