如何在展开的小部件中的文本小部件之后添加图标？

Question

我希望在文本小部件之后关闭 arrow_right 图标，但我必须用 Expanded 包裹文本，因为它可能会溢出

Answer 1

我认为这可以解决它。

Row(
  children: const [
    Expanded(
      child: Text(
        'this line is overflow, but icon is in right position',
        style: TextStyle(fontSize: 12),
        softWrap: false,
        maxLines: 2,
        overflow: TextOverflow.ellipsis, // new
      ),
    ),
  ],
)

或者

Row(
  children: const [
    Expanded(
      child: FittedBox(
        child: Text(
          'this line is overflow, but icon is in right position',
          style: TextStyle(fontSize: 12),
          softWrap: false,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    ),
  ],
)

代码示例

return Scaffold(
        body: SafeArea(
          child: Expanded(
            child: ColoredBox(
              color: Colors.deepOrangeAccent,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[

                  const Text(
                    'Line 1',
                    style: TextStyle(fontSize: 24),
                  ),

                  Row(
                    children: const [
                      Container(
                        child: Text(
                          'this line might overflow',
                          style: TextStyle(fontSize: 12),
                        ),
                      ),
                      Icon(Icons.arrow_right),
                    ],
                  ),

                  Row(
                    children: const [
                      Expanded(
                        child: Text(
                          'this line is overflow, but icon is in right position // this line is overflow, but icon is in right position',
                          style: TextStyle(fontSize: 12),
                          softWrap: false,
                          //maxLines: 2,
                          overflow: TextOverflow.ellipsis, // new
                        ),
                      ),
                      Icon(Icons.arrow_right),
                    ],
                  ),

                ],
              ),
            ),
          ),
        ),
    );

结果图像

我会告诉你我知道的两种方法。

1. 使用Container小部件

• 如何通过给定width:此方法允许您在文本旁边附加一个图标。

2. 使用Expanded小部件

• “扩展”是一个百分比。 由于您现在使用的是Expanded小部件，因此Text小部件占用了除Icon小部件空间之外的所有剩余空间。

您可以根据您的应用程序的条件使用它。

Answer 2

你应该试试这个解决方案

主要.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          SizedBox(
            height: 130,
            child: Row(
              children: [
                Expanded(
                  flex: 2,
                  child: Container(
                    color: Colors.yellowAccent,
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Column(
                    children: [
                      Expanded(
                        flex: 5,
                        child: Container(
                          color: Colors.deepOrangeAccent,
                          width: MediaQuery.of(context).size.width,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              const Expanded(
                                flex: 2,
                                child: FittedBox(
                                  child: Text("line 1"),
                                ),
                              ),
                              Expanded(
                                flex: 3,
                                child: Column(
                                  children: [
                                    Expanded(
                                        child: Row(
                                      children: const [
                                        Expanded(
                                          child: Text(
                                            "this line might overflow",
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        AspectRatio(
                                          aspectRatio: 1,
                                          child: FittedBox(
                                              child: Icon(Icons.arrow_right)),
                                        ),
                                      ],
                                    )),
                                    Expanded(
                                        child: Row(
                                      children: const [
                                        Expanded(
                                          child: Text(
                                            "this line is overflow, the icon is in right position",
                                            overflow: TextOverflow.ellipsis,
                                          ),
                                        ),
                                        AspectRatio(
                                          aspectRatio: 1,
                                          child: FittedBox(
                                              child: Icon(Icons.arrow_right)),
                                        ),
                                      ],
                                    )),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 3,
                        child: Container(
                          color: Colors.deepPurpleAccent,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

解决方案图片

注意：此解决方案完全响应。

Answer 3

终于，Flexible 可以了！！！

Answer 4

******* 尝试这个 ********

Text("Any Text Add",
                      textScaleFactor: 0.85,
                        style: TextStyle(
                          fontSize: 12
                        ),
                      )