时间戳

首页 > 解决方案 > 如何使我的文本可选择并更改标题颜色？

flutter - 如何使我的文本可选择并更改标题颜色？

问题描述

我想让ListView文本可选择并让第一个文本成为默认值。我希望它看起来像 Discover 文本下方的文本：https ://cdn.dribbble.com/users/2884070/screenshots/12198574/media/cfe620d3b9b4e5f6665cb00703b92101.png

这就是我所拥有的：

https://cdn.discordapp.com/attachments/626321327791538188/725049838793654405/img1.PNG

这是我想要的部分的代码：

Widget catagoriesSection = Container(
    decoration: BoxDecoration(
      color: Color.fromRGBO(236, 239, 248, 1),
      borderRadius: BorderRadius.only(bottomLeft: Radius.circular(45.0)),
    ),
    padding: const EdgeInsets.fromLTRB(30, 5, 30, 0),
    child: Row(
      children: <Widget>[
        Expanded(
            child: SizedBox(
                height: 350,
                child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: <Widget>[
                      _buildTravelName(categories[0]),
                      SizedBox(width: 40),
                      _buildTravelName(categories[1]),
                      SizedBox(width: 40),
                      _buildTravelName(categories[2])
                    ])))
      ],
    ));

Widget _buildTravelName(String title) {
return GestureDetector(
    onTap: () {
      print("Button pressed");
    },
    child: Text(title,
        style: GoogleFonts.ubuntu(
            fontSize: 18,
            fontWeight: FontWeight.w600,
            color: Color.fromRGBO(139, 98, 168, .4))));

}

标签： flutterflutter-layout

解决方案

创建一个变量来跟踪单击了哪个类别。我还更改了您的函数参数，以便我们可以使用索引来获取标题文本和类别列表中的位置。像下面的 fontWeight 一样应用装饰。

int _currentCat = 0;
Widget _buildTravelName(int index) {
    return GestureDetector(
        onTap: () {
            setState(() => _currentCat = index);
            print("Button pressed");
        },
        child: Text(categories[index],
            style: GoogleFonts.ubuntu(
            fontSize: 18,
            fontWeight: _currentCat == index ? FontWeight.w600 : FontWeight.bold,
            color: Color.fromRGBO(139, 98, 168, .4))));

推荐阅读