Flutter 自定义一个右侧可滑动 左侧为按钮的组件

发布时间 2024-01-13 12:35:36作者: hczhhm
   var topicList = ["圈子话题1","圈子话题2","圈子话题3","圈子话题4-天气很好","圈子话题5","圈子话题6"];
   @override
   Widget build(BuildContext context){
    
     return SizedBox(
        height:ScreenUtil().setWidth(40) ,
        child:
        Stack(
          children:[
            Container(
              height: ScreenUtil().setWidth(40),
              margin:  EdgeInsets.fromLTRB( ScreenUtil().setWidth(10), 0,  ScreenUtil().setWidth(40), 0),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    for (int i = 0 ;i < topicList.length;i++)
                      TopicItem(topicString: topicList[i]) ,

                  ],
                ),//Row
              ),//SingleChildScrollView
            ),//Container
            Container(
              width: ScreenUtil().setWidth(40), 
              height: ScreenUtil().setWidth(40),
              margin: EdgeInsets.only(left: ScreenUtil().setWidth(336)),
              child: ElevatedButton(
                  onPressed: ()=>{
                     butonAction()
                  },
                  style:const ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.black)),
                  child:const Image(image: AssetImage("image/detail_cell.png"),),
               
              ),//ElevatedButton
            )//Container
          ],//children
        )//Stack
     );//SizedBox
   }

效果如下: