Question

在我的flutter项目中，我已经初始化了Row。在里面，我在列中创建了一些文本，然后我想添加一行，但是它什么都没有显示。因此，我使用了Expanded并遵循了给定的解决方案-

Horizontal divider with text in the middle in Flutter?

但是他们都不起作用。

这是我的代码输出的图像-

这是我的代码-

  Container(
                  color:Colors.white,
                  child: (
                    Row(

                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image(
                              height: 100,
                              width: 100,
                              image: NetworkImage("https://www.gstatic.com/webp/gallery/1.jpg"),
                            ),
                        ),

                        Column(
                          children: <Widget>[
                            Text("Book Name"),
                            Text("Author name"),


                            Divider(
                              color: Colors.black,
                            )


                          ],
                        )


                      ],
                    )
                  ),
                ),

因此，我需要在两个文本下面一行，并像下面的图片一样显示它-

Answer 1

尝试将Column包裹在Expanded中，以便Divider知道要占用多少空间。

Container(
  color: Colors.white,
  child: (Row(
    children: <Widget>[
      // ...
      Expanded(
        child: Column(
          children: <Widget>[
            Text("Book Name"),
            Text("Author name"),
            Divider(
              color: Colors.black,
            )
          ],
        ),
      )
    ],
  )),
);

Answer 2

这个想法是您将divider放在一列中，而默认情况下分隔线是水平的，因此没有足够的空间可容纳。如果您更改height的{{1}}属性，则可以清楚地看到它。

如果需要，可以将divider包裹在divider中，也可以将row包裹在外部divider中，尽管您可能需要修正其对齐方式并包裹放在row中。您还可以将列包装为展开的列，以便占据分隔符出现的所有足够空间。

我会为您执行代码，但是我只显示了部分代码+应该不会太难。如果您需要更多帮助，请告诉我！

Answer 3

在行中添加水平分隔线

向子级添加容器小部件：并固定容器宽度：0.1，和颜色：Colors.black,

sample:Container(width: 0.1,
                  color:Colors.black),

//在Row()中添加分隔线的例子，

 Container(
                    width: double.infinity,
                    height: 80.0,
                    color: Colors.grey[200],
                    child:Row(
                      children:[
                        Expanded(
                        child:ListTile(
                        //leading: Icon(Icons.speed_sharp),
                        title: Text('Speed'),
                        subtitle: Text('0 mbps'),
                        trailing: Icon(Icons.speed_sharp),
                        horizontalTitleGap: 2.0,
                        )
                      ),
//Sample Code from here:
                       Container(width: 0.1,
                      color:Colors.black),


                      Expanded(child: ListTile(
                        
                       // leading: Icon(Icons.account_balance_wallet_sharp),
                        title: Text('Renewal Date'),
                        subtitle: Text('N/A'),
                        trailing: Icon(Icons.account_balance_wallet_sharp),
                        horizontalTitleGap: 4.0,
                        hoverColor: Colors.red,
                      ),flex: 1,
                      ),
                      Expanded(child: ListTile(
                       // leading: Icon(Ionicons.bag_add),
                        title: Text('Wallet'),
                        subtitle: Text(' 15.33'),
                        trailing: Icon(Ionicons.bag_add),
                        horizontalTitleGap: 2.0,
                        
                      )),
                      ],
                    ) ,
                  ),

如何在颤动行小部件中绘制水平线？

3 个答案: