对齐Flutter中的文本以制作餐厅菜单

7hiiyaii  于 2023-01-18  发布在  Flutter
关注(0)|答案(2)|浏览(118)

我在为这样的餐厅做菜单:-

我正在使用Flutter,这是我的代码:

return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          title: Row(
            children: [
              Expanded(child: Text( text, style: style, )),
              const SizedBox( width: 15 ),
              Text( '\$ $price', style: style,),
            ],
          ),
        ),
        Divider( color: Colors.white.withOpacity( 0.5 ),),
      ],
    );

但这是我得到的结果:-

拜托,任何帮助都是受欢迎的。先谢了。

vptzau2j

vptzau2j1#

我是这样解决你的问题的
Output of your issue :}

body: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ListTile(
        title: Row(
          children: [
            const Text(
              'Cheese Burger',
            ),
            Expanded(child: Text('.' * 100, maxLines: 1)),
            const Text(
              '\$ 10',
            ),
          ],
        ),
      ),
      const SizedBox(
        height: 10,
      ),
      ListTile(
        title: Row(
          children: [
            const Text(
              'Chicken Masala Soup',
            ),
            Expanded(child: Text('.' * 100, maxLines: 1)),
            const Text(
              '\$ 10',
            ),
          ],
        ),
      ),
    ],
  ),
fdbelqdn

fdbelqdn2#

您想要实现的结果只需使用行小部件就可以完成,你不需要用ListTile来 Package 它。我正在为你写行小部件的代码片段。你可以复制粘贴它,它会工作。另外,我看到你正在列小部件中生成它。如果你有一个动态数组,那么我建议你使用ListView分隔符代替。它也会在你的行之间添加一个分隔符,你可以在flutter官方文档中找到更多关于它的信息。

Row(
children:[
//You may add some padding to Text for better looking UI. 
   Text("Chicken Masala"),
   Expanded(child:Divider()),
   Text("180")
])

只需将列的子列替换为此行,您就可以看到它。

相关问题