Flutter 中的 TextOverflow 无法避免溢出,如何限制文本长度?

问题描述 投票:0回答:1

我已经为此苦苦挣扎了一段时间,而且在过去,我尝试了许多添加约束的组合,包括行、列、扩展、灵活、ConstrainedBox、LayoutBuilder 等的变体,但似乎没有什么可以解决文本和的基本问题TextOverflow 实际上并没有帮助限制溢出边界。似乎如果框架知道它正在溢出,那么必须有一种方法来限制到这一点,但我还没有找到它。任何建议(包括包)都将受到欢迎,否则我正在考虑为该框架制作 PR。这是显示我的麻烦的最小示例。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:
        Container(
        color: Colors.red,
          width: MediaQuery.of(context).size.width,
          child:Row(children: [
          Row(children: [
            Text("A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
            style: TextStyle(overflow: TextOverflow.clip),
            )
          ],),

          Row(children: [
            Container(
              color: Colors.green,
              width: MediaQuery.of(context).size.width * .25,
            ),
            Container(
              color: Colors.blue,
              width: MediaQuery.of(context).size.width * .25,
            )
          ],)

        ]),)
      ),
    );
  }
}
flutter text boxconstraints
1个回答
0
投票
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Container(
        color: Colors.red,
        width: MediaQuery.of(context).size.width,
        child: Row(children: [
          Expanded(
            child: Text(
              "A VERY LONG TEXT  ASDFASDFASDFASDFASDFASDFASDFASDASDFASDFASDFASDFASDFASDFASDFASDF",
              style: TextStyle(overflow: TextOverflow.clip),
            ),
          ),
          Row(
            children: [
              Container(
                color: Colors.green,
                width: MediaQuery.of(context).size.width * .25,
              ),
              Container(
                color: Colors.blue,
                width: MediaQuery.of(context).size.width * .25,
              )
            ],
          )
        ]),
      )),
    );
  }
}

这应该有效

© www.soinside.com 2019 - 2024. All rights reserved.