Question

我正在尝试为Row（）小部件设置背景颜色，但是Row本身没有背景颜色或color属性。我已经能够将容器的背景颜色设置为灰色，就在紫色背景的文本之前，但是文本本身并不能完全填充背景，并且下面的间隔符根本没有任何颜色。

那么如何将“行”背景设置为“ HexColor（COLOR_LIGHT_GREY）”值，以使其覆盖整个行？

有什么主意吗？非常感谢！

这是我到目前为止的代码：

import 'package:flutter/material.dart';
import '../manager/ShoppingListManager.dart';
import '../model/ShoppingListModel.dart';
import '../hexColor.dart';
import '../Constants.dart';

class ShoppingListWidget extends StatelessWidget {
  final Color color = Colors.amberAccent;
  final int shoppingListIndex;

  ShoppingListWidget({this.shoppingListIndex});

  @override
  Widget build(BuildContext context) {
    ShoppingListManager slm = new ShoppingListManager();
    String shoppingListName =
        slm.myShoppingLists.shoppingLists[shoppingListIndex].name;
    int categoryCount =
        slm.myShoppingLists.shoppingLists[shoppingListIndex].categories.length;

    return Scaffold(
      appBar: AppBar(
        title: Text(shoppingListName),
        automaticallyImplyLeading: true,
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          Category cat = slm.myShoppingLists.shoppingLists[shoppingListIndex]
              .categories[index];

          return Container(
            decoration: new BoxDecoration(
              border: new Border.all(color: Colors.grey[500]),
              color: Colors.white,
            ),
            child: new Column(
              children: <Widget>[
                getCategoryWidget(context, cat),
                getCategoryItems(context, cat),
              ],
            ),
          );
        },
        itemCount: categoryCount,
      ),
    );
  }

  // Render the category "headline" row where I want to set the background color
  // to HexColor(COLOR_LIGHT_GREY)
  Widget getCategoryWidget(BuildContext context, Category cat) {
    return new Row(
      children: <Widget>[
        new Container(height: 40.0, width: 10.0, color: HexColor(cat.color)),
        new Container(
            height: 40.0, width: 15.0, color: HexColor(COLOR_LIGHT_GREY)),
        new Container(
          child: new Text("Category", textAlign: TextAlign.start,
            style: TextStyle(
                fontFamily: 'Bold',
                fontSize: 18.0,
                color: Colors.black),
          ),
          decoration: new BoxDecoration(
            color: Colors.purple,
          ),
          height: 40.0,
        ),
        Spacer(),

        CircleAvatar(
          backgroundImage:
              new AssetImage('assets/icons/food/food_settings.png'),
          backgroundColor: HexColor(COLOR_LIGHT_GREY),
          radius: 15.0,
        ),
        new Container(height: 15.0, width: 10.0, color: Colors.transparent),
      ],
    );
  }

  // render the category items
  Widget getCategoryItems(BuildContext context, Category cat) {
    return ListView.builder(
      itemBuilder: (context, index) {
        String itemName = "Subcategory";
        return new Row(children: <Widget>[
          new Container(height: 40.0, width: 5.0, color: HexColor(cat.color)),
          new Container(height: 40.0, width: 20.0, color: Colors.white),
          new Container(
            child: new Text(itemName),
              color: Colors.white,
          ),
          Spacer()
        ]);
      },
      itemCount: cat.items.length,
      shrinkWrap: true,
      physics:
          ClampingScrollPhysics(),
    );
  }

}

Answer 1

使用ColoredBox代替Container可以提高效率。

使用Container会导致小部件层次结构，该层次结构使用BoxDecoration实际绘制背景颜色。 BoxDecoration小部件不仅覆盖了背景色，还涵盖了许多情况，其效率不如新的ColoredBox小部件，后者仅绘制背景色。 Source

ColoredBox(
  color: Colors.red,
  child: Row(children: []),
)

Answer 2

只需用具有如下颜色属性的容器包装行：

   Container(
            color: Colors.black,
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Text('Demo', style: TextStyle(color: Colors.white),),
                )
              ],
            ),
          )

Answer 3

你可以试试这个，它会起作用。

return DataRow.byIndex(
          index: row.key,
          color: MaterialStateColor.resolveWith(
            (states) {
              if (row.key % 2 == 0) {
                return Colors.blue[50];
              } else {
                return Colors.white;
              }
            },
          ),

Answer 4

或者您也可以将BoxDecoration添加到TableRow。

然后将背景色作为color属性添加到TableRow上的BoxDecoration。

with cte as 
 ( Select 1 as Header
     ,Start
     ,dateadd(month, 1, Start) as AdditionalDate
     ,datediff(day, Start, dateadd(month, 1, Start)) as AdditionalDays 
   from Appointment
   union all
   select Header+1
     ,Start
     ,dateadd(month, 1, AdditionalDate)
     ,datediff(day, Start, dateadd(month, 1, AdditionalDate))
   from cte
   where Header <= 2
 )
Select * from cte

如何在Flutter中设置Row（）的背景颜色？

4 个答案: