如何在Flutter中将图标与两列中的富文本对齐？

ukxgm1gy 于 2023-01-27 发布在 Flutter

关注(0)|答案(3)|浏览(271)

我在Flutter中很难将图标与两行富文本对齐。如下图所示，我想将一个富文本小工具与一个图标对齐。示例：包含"修订注解"和"自由注解"的富文本应该与绿色图标勾号在同一行。如果我尝试只使用一行文本，勾号将与其对齐，但现在如果我有两行富文本，它将不会对齐。
感谢您的帮助!
图片：

代码：

child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Revision notes\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free notes.'),
                            ],
                          ),
                        ),
                      
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Quizzes\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free quizzes.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'No Ads\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'All annoying ads gone.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: '10 Flashcards\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Create your own 10 flashcards.'),
                            ],
                          ),
                        ),
                        RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Textbooks\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Download all textbooks in PDF.'),
                            ],
                          ),
                        ),
                          RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'State Trial Papers\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Download all trial papers in PDF.'),
                            ],
                          ),
                        ),
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.done_rounded,
                          color: Colors.green,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                        Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                      ],
                    ),
                  ]),

flutter

来源：https://stackoverflow.com/questions/75211971/how-to-align-icons-with-richtext-in-two-columns-in-flutter

3条答案

按热度按时间

jgzswidk1#

溶液1

我会首先尝试把富文本小部件和相应的图标放在一行中，垂直居中元素，而不是两个单独的列，这使得它有点复杂。像这样（只有1行的例子）：

Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          RichText(
            text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: const <TextSpan>[
                TextSpan(
                    text: 'Revision notes\n',
                    style: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.bold)),
                TextSpan(text: 'Free notes.'),
              ],
            ),
          ),
          const Icon(
            Icons.done_rounded,
            color: Colors.green,
            size: 24.0,
          ),
        ],
      ),
    ],
  )

mainAxisAlignment属性将对齐元素，将它们一个推到屏幕的左边，一个推到屏幕的右边。
crossAxisAlignment属性将通过垂直居中对齐元素。

溶液2

如果你仍然需要两列，那么你可以用LayoutBuilder读取左边单行的高度，然后用这个大小作为图标的高度。另一种方法是给所有行固定高度，因为你总是有相同大小的标题和副标题（最好测试这个小屏幕），所以你完全解决了这个问题。我会把这个作为最后一个解决方案。

赞(0）回复(0）举报 2023-01-27

s5a0g9ez2#

使用一行并在它们之间放置一个空格（我在这里使用了一个空格，你可以使用一个SizedBox或类似的东西）：

Row(
                        children: [
                          RichText(
                          text: TextSpan(
                            style: DefaultTextStyle.of(context).style,
                            children: const <TextSpan>[
                              TextSpan(
                                  text: 'Revision notes\n',
                                  style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold)),
                              TextSpan(text: 'Free notes.'),
                            ],
                          ),
                        ),
                          Spacer(),
                          Icon(
                          Icons.close,
                          color: Colors.red,
                          size: 24.0,
                        ),
                        ],
                        ),

赞(0）回复(0）举报 2023-01-27

m3eecexj3#

我建议你创建一个小部件来创建每一行，这样你的代码会更易读。看看我的例子：

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        backgroundColor: Colors.amber,
        body: SizedBox(
          width: 300,
          child: ListView(
            children: const [

              CustomListTile(
                title: 'Revision notes', 
                subtitle: 'Free notes', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'Quizzes', 
                subtitle: 'Free quizzes', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'No Ads', 
                subtitle: 'All ... ', 
                trailing: Icon( Icons.check, color: Colors.greenAccent, )),
              
              CustomListTile(
                title: 'Flashcards', 
                subtitle: 'Create your own...', 
                trailing: Icon( Icons.close, color: Colors.redAccent, )),
              
              CustomListTile(
                title: 'Textbooks', 
                subtitle: 'Download all ...', 
                trailing: Icon( Icons.close, color: Colors.redAccent, )),
                
            ],
          ),
        ),
      ),
    );
  }
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

class CustomListTile extends StatelessWidget {
  const CustomListTile({
    super.key, 
    required this.title, 
    required this.subtitle, 
    required this.trailing
  });
  final String title;
  final String subtitle;
    final Icon trailing;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text( title, style: const TextStyle( fontSize: 20 ), ),
      subtitle: Text( subtitle,  style: const TextStyle( fontSize: 14 ), ),
      trailing: trailing,
    );
  }
}

这是我的输出：

赞(0）回复(0）举报 2023-01-27

我来回答

如何在Flutter中将图标与两列中的富文本对齐？

3条答案

溶液1

溶液2

相关问题

热门标签

最新问答