如何做这个设计

Question

我想在flutter中做这个设计我试过行，但是会溢出。 所以，你可以帮我用任何其他方式来做这个！

Answer 1

好的，没有必要像其他答案建议的那样用容器编写芯片。 因为您实际上在 Flutter 中有芯片小部件。请检查它们，它们有详细的文档并提供了示例。

https://api.flutter.dev/flutter/material/FilterChip-class.html

https://api.flutter.dev/flutter/material/ChoiceChip-class.html

https://api.flutter.dev/flutter/material/InputChip-class.html

Answer 2

这是我在我的项目中使用的确切编码，它可能会帮助你......

根据您的设计更改..

class HomeScreen_Coffee extends StatefulWidget {
  const HomeScreen_Coffee({Key? key}) : super(key: key);

  @override
  State<HomeScreen_Coffee> createState() => _HomeScreen_CoffeeState();
}

class _HomeScreen_CoffeeState extends State<HomeScreen_Coffee> {
  List<String> titles=['All','Fav','Popular','Trending'
  ];

  int selectedindex=0;



  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: 
            Container(
              height: 40,
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  itemCount: titles.length,
                  itemBuilder: (context,index){
                    return CoffeeTile(name: titles[index], ontap: (){
                      selectedindex=index;
                      setState(() {

                      });
                    },isselected: selectedindex==index,);
                  }),
            ),
           
        ));
  }
}

class CoffeeTile extends StatelessWidget {

  final String name;
  final bool isselected;
  final VoidCallback ontap;

  const CoffeeTile({Key? key,required this.name,this.isselected=false,required this.ontap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 12.0),
      child: GestureDetector(
        onTap: ontap,
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white12,
            borderRadius: BorderRadius.circular(20),

          ),
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Center(
            child: Text(name.toString(),style: TextStyle(
              fontSize: 18,color: isselected?Colors.orange:Colors.grey,fontWeight: FontWeight.bold
            ),),
          ),
        ),
      ),
    );
  }
}

Answer 3

为选定的索引定义变量。

int selectedIndex = 0;

只需放入您的小部件

SizedBox(
          height: 40,
          child: ListView.builder(
            itemCount: 20,
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            physics: BouncingScrollPhysics(),
            itemBuilder: (context, index) {
              return InkWell(
                onTap: () {
                  selectedIndex = index;
                  setState(() {});
                },
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 5),
                  decoration: BoxDecoration(
                    color: selectedIndex == index ? Colors.blueAccent.shade100 : Colors.white,
                    borderRadius: BorderRadius.circular(30),
                  ),
                  padding: EdgeInsets.symmetric(vertical: selectedIndex == index ? 12 : 10, horizontal: selectedIndex == index ? 18 : 15),
                  child: Text("Text $index", style: TextStyle(color: selectedIndex == index ? Colors.white : Colors.grey, fontSize: selectedIndex == index ? 15 : 12)),
                ),
              );
            },
          ),
        )

我希望这会解决你的问题。