在 flutter 中设置文本长度的宽度

Question

我使用列表 listview.builder 创建了类别列表

在这里，我想通过使用容器为类别文本加下划线来突出显示所选类别，并且我想根据文本长度应用宽度......就像我们为文本加下划线一样，

我知道它们是内置的一些包，但我不想使用它，因为我想实现我的逻辑。

这是我的代码

我已经在我想要动态宽度的地方设置了注释

class CatogoryList extends StatefulWidget {


  @override
  State<CatogoryList> createState() => _CatogoryListState();
}

class _CatogoryListState extends State<CatogoryList> {
  List<String> categories=['HandBag','Jwellery','FootWear','Dresses','Pens','Jeans','Trousers'];
  int selectedindex=2;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 30,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
          itemCount: categories.length,
          itemBuilder: (context,index){
        return buildCategory(index);

      }),
    );
  }

  Widget buildCategory(int index)
  {
    return GestureDetector(
      onTap: (){
        setState(() {
          selectedindex=index;
        });
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
          Text(categories[index],style: TextStyle(fontSize: 20,color: selectedindex==index?Colors.blue:Colors.grey),),
          if(selectedindex==index)
            Container(
// here I want to set widget of container based on text length
            height: 3,width: 30,color: Colors.blue,),

        ],),
      ),
    );
  }
}

Answer 1

文本基于装饰属性，您可以在其中添加下划线

Text(
  "${categories[index]}",
   style: TextStyle(decoration: 
  TextDecoration.underline),
 )

Answer 2

这样做：

Widget buildCategory(int index)
{
    return Wrap(
          children: [
    GestureDetector(
        onTap: (){
          setState(() {
            selectedindex=index;
          });
        },
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: IntrinsicWidth(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(categories[index],style: TextStyle(fontSize: 20,color: selectedindex==index?Colors.blue:Colors.grey),),
                if(selectedindex==index)
                  Container(height: 3,color: Colors.blue,),
              ],),
          ),
        ),
      )
    ],
    );
}

并移除SizedBox( height: 30,)

Answer 3

1

一种方法是将 Column 包装在 IntrinsicWidth 中，并从 Container 中省略宽度。 喜欢

Widget buildCategory(int index)
{
  return GestureDetector(
    onTap: (){
      setState(() {
        selectedindex=index;
      });
    },
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      child: IntrinsicWidth(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(categories[index],style: TextStyle(fontSize: 20,color: selectedindex==index?Colors.blue:Colors.grey),),
            if(selectedindex==index)
              Container(height: 3,color: Colors.blue,),
          ],),
      ),
    ),
  );
}