如何在展開的小部件中的文本小部件之后添加圖標？

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
                        ),
                      )