Question

我在此列中有一行，列子项是两个文本，我将第一个文本小部件放入容器中，我希望容器背景填充列的暗淡宽度。但背景仅在出现文字的地方可见，左右均为空，

这是我的代码

  Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    _bookingData.bookingData[index].paymentStatusFe =="Paid" ?
    Container(
      decoration: BoxDecoration(
          border: Border.all(color: Colors.deepPurpleAccent)
      ),
      child:
      Column(
        children: <Widget>[
          Container(
            child: Text("Paid"),
              color: Colors.red,
          ),
          Padding(
            padding: const EdgeInsets.all(2.0),
            child: Text(
              'AED' +
                  ' ' +
                  _bookingData
                      .bookingData[
                  index]
                      .amount
                      .toString(),
              style: TextStyle(
                  fontSize:
                  12,
                  fontFamily:
                  'Roboto Condensed',
                  color: Colors.deepPurpleAccent,
                  fontWeight:
                  FontWeight
                      .w600),
            ),
          )
        ],
      ),
    ): Container(
      // width: double.infinity,
      decoration: BoxDecoration(
          border: Border.all(color: Colors.red)
      ),
      child:
      Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            "Not Paid",
            style: TextStyle(
                backgroundColor: Colors.red,
                color: Colors.white
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(2.0),
            child: Text(
              'AED' +
                  ' ' +
                  _bookingData
                      .bookingData[
                  index]
                      .amount
                      .toString(),
              style: TextStyle(
                  fontSize:
                  12,
                  fontFamily:
                  'Roboto Condensed',
                  color: Colors.red,
                  fontWeight:
                  FontWeight
                      .w600),
            ),
          )
        ],
      ),
    ),                                             
  ],
),

行被放置在Listview中。因此，我想在付费文本的背景中使用红色，但是红色只是付费文本的开始，直到它结束为止，而不是整个列。

Answer 1

您必须在代码中进行两项更改
1）在扩展的小部件内添加根容器
2）在内部容器中设置width：double.infinity

Row(mainAxisSize: MainAxisSize.max, children: <Widget>[
      // first change
      Expanded(
        flex: 1,
        child: Container(
            decoration:
                BoxDecoration(border: Border.all(color: Colors.deepPurpleAccent)),
            child: Column(
              children: <Widget>[
                Container(
                  //second change
                  width: double.infinity,
                  child: Text("Paid"),
                  color: Colors.red,
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: Text(
                    'AED TEST',
                    style: TextStyle(
                        fontSize: 12,
                        fontFamily: 'Roboto Condensed',
                        color: Colors.deepPurpleAccent,
                        fontWeight: FontWeight.w600),
                  ),
                )
              ],
            )),
      ),
    ]);

列的容器填充宽度

1 个答案: