如何在Flutter中设置Row()的背景色？

zaqlnxep 于 2022-12-29 发布在 Flutter

关注(0)|答案(6)|浏览(458)

我尝试为Row（）小部件设置背景色，但Row本身没有背景色或color属性，我可以将容器的背景色设置为灰色，就在紫色背景文本之前，但文本本身并没有完全填充背景，后面的空格根本没有任何颜色。
那么，如何将Row背景设置为“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(),
    );
  }

}

flutter

来源：https://stackoverflow.com/questions/56410074/how-to-set-the-background-color-of-a-row-in-flutter

6条答案

按热度按时间

qkf9rpyu1#

只需用颜色属性如下的容器 Package 您的行：

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

赞(0）回复(0）举报 2022-12-30

xv8emn3q2#

将Row Package 在Container或ColoredBox中，并为其提供color。

Container(
  color: Colors.red, // <-- Red color provided to below Row
  child: Row(...), /
)

或

ColoredBox(
  color: Colors.red, // <-- Red color provided to below Row
  child: Row(...), /
)

赞(0）回复(0）举报 2022-12-30

ki0zmccv3#

你可以试试这个，它会工作。

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

赞(0）回复(0）举报 2022-12-30

wqsoz72f4#

我使用我自己的自定义行和列，所以可以自定义选项：

Widget column({
  final EdgeInsets padding = EdgeInsets.zero,
  final EdgeInsets margin = EdgeInsets.zero,
  final List<Widget> children = const <Widget>[],
  final MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  final MainAxisSize mainAxisSize = MainAxisSize.max,
  final CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  final VerticalDirection verticalDirection = VerticalDirection.down,
  final BoxDecoration? decoration,
  final double? width,
  final double? height,
  final bool isScrollable = false,
  final VoidCallback? onTap,
}) =>
    Container(
      width: width,
      height: height,
      decoration: decoration,
      padding: padding,
      margin: margin,
      child: isScrollable
          ? SingleChildScrollView(
              child: Column(
                mainAxisAlignment: mainAxisAlignment,
                mainAxisSize: mainAxisSize,
                crossAxisAlignment: crossAxisAlignment,
                verticalDirection: verticalDirection,
                children: children,
              ),
            )
          : GestureDetector(
              onTap: onTap,
              child: Column(
                mainAxisAlignment: mainAxisAlignment,
                mainAxisSize: mainAxisSize,
                crossAxisAlignment: crossAxisAlignment,
                verticalDirection: verticalDirection,
                children: children,
              ),
            ),
    );

Widget row({
  final EdgeInsets padding = EdgeInsets.zero,
  final EdgeInsets margin = EdgeInsets.zero,
  final List<Widget> children = const <Widget>[],
  final MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  final MainAxisSize mainAxisSize = MainAxisSize.max,
  final CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  final VerticalDirection verticalDirection = VerticalDirection.down,
  final BoxDecoration? decoration,
  final double? width,
  final double? height,
  final bool isScrollable = false,
  final VoidCallback? onTap,
}) =>
    Container(
      width: width,
      height: height,
      decoration: decoration,
      padding: padding,
      margin: margin,
      child: isScrollable
          ? SingleChildScrollView(
              child: Row(
                mainAxisAlignment: mainAxisAlignment,
                mainAxisSize: mainAxisSize,
                crossAxisAlignment: crossAxisAlignment,
                verticalDirection: verticalDirection,
                children: children,
              ),
            )
          : GestureDetector(
              onTap: onTap,
              child: Row(
                mainAxisAlignment: mainAxisAlignment,
                mainAxisSize: mainAxisSize,
                crossAxisAlignment: crossAxisAlignment,
                verticalDirection: verticalDirection,
                children: children,
              ),
            ),
    );

赞(0）回复(0）举报 2022-12-30

laawzig25#

您可以简单地使用ListTile并设置平铺颜色，如下所示：
第一个月
它将更改ListView中整行的颜色

赞(0）回复(0）举报 2022-12-30

bxjv4tth6#

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

Table(
    border: TableBorder.all(),
    children: pairs
        .asMap()
        .map((index, pair) => MapEntry(
            index,
            TableRow(
                decoration: BoxDecoration(
                  color: Theme.of(context)
                      .accentColor // Background color for the row
                      .withOpacity(index % 2 == 0 ? 1.0 : 0.5), // To alternate between dark and light shades of the row's background color.
                ),
                children: [
                  Padding(
                    padding: const EdgeInsets.all(kDefaultMargin / 2),
                    child: Text(
                      pair.first,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(kDefaultMargin / 2),
                    child: Text(pair.second),
                  )
                ])))
        .values
        .toList()
);

赞(0）回复(0）举报 2022-12-30

我来回答

如何在Flutter中设置Row()的背景色？

6条答案

相关问题

热门标签

最新问答