flutter 如何为文本设置背景色?

bmvo0sr5  于 2022-12-30  发布在  Flutter
关注(0)|答案(5)|浏览(307)

我想给予文本背景上色,如下图所示:

而我的还是这样

我写的代码是这样的:

Text(
                'Last Activity',
                style: TextStyle(
                  fontSize: 16,
                  color: ColorName.whitePrimary,
                ),
              ),
k5ifujac

k5ifujac1#

body: Center(
        child: TextButton.icon(
          style: TextButton.styleFrom(
            textStyle: TextStyle(color: Colors.blue),
            backgroundColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(6.0),
            ),
          ),
          onPressed: () => {},
          icon: Text('Last Activity'),
          label: Icon(Icons.chevron_right),
        ),
      ),

qlzsbp2j

qlzsbp2j2#

Text小部件中设置style参数:

Text(
      'Hello, World!',
      style: TextStyle(fontSize: 32, backgroundColor: Colors.green),
    );

另请参见
vwoqyblh

vwoqyblh3#

请尝试以下代码:

Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
    backgroundColor: Colors.indigo[400],
  ),
),
jhiyze9q

jhiyze9q4#

参考下面的代码希望对你有所帮助,我已经尝试了2种方式TextButton.iconRow

1.使用文本按钮小部件

TextButton.icon(
        style: TextButton.styleFrom(
          foregroundColor: Colors.white,
          backgroundColor: const Color.fromRGBO(60, 75, 175, 1),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(6.0),
          ),
        ),
        onPressed: () => {},
        icon: const Text('Last Activity'),
        label: const Icon(Icons.chevron_right),
      ),

使用文本按钮图标的结果-〉x1c 0d1x

2.使用行

GestureDetector(
            onTap: () {},
            child: Container(
              height: 30,//change on your need
              width: 120,//change on your need
              padding: const EdgeInsets.all(5),
              alignment: Alignment.center,
              color: const Color.fromRGBO(60, 75, 175, 1),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: const [
                    Text(
                    'Last Activity',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                    Icon(
                    Icons.chevron_right,
                    color: Colors.white,
                  ),
                ],
              ),
            ),
          ),

使用行-〉

的结果

t8e9dugd

t8e9dugd5#

请尝试以下代码:

Text(
  'Last Activity',
  style: TextStyle(
    fontSize: 16,
    color: ColorName.whitePrimary,
  ),
),

相关问题