首页 > 其他分享 >Flutter 自定义一个右侧可滑动 左侧为按钮的组件

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

时间:2024-01-13 12:45:14浏览次数:40  
标签:Container 自定义 圈子 按钮 话题 40 child Flutter

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

   var topicList = ["圈子话题1","圈子话题2","圈子话题3","圈子话题4-天气很好","圈子话题5","圈子话题6"];
   @override
   Widget build(BuildContext context){
     return SizedBox(
        height:40 ,
        child:
        Stack(
          children:[
            Container(
              height: 40,
              margin:  EdgeInsets.fromLTRB( 10, 0,  40, 0),
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    for (int i = 0 ;i < topicList.length;i++)
                      //TopicItem为自定义组件
                      TopicItem(topicString: topicList[i]) ,
                  ],
                ),//Row
              ),//SingleChildScrollView
            ),//Container
            Container(
              width: 40, 
              height:40,
              margin: EdgeInsets.only(left:336),
              child: ElevatedButton(
                  onPressed: ()=>{
                     
                  },
                  style:const ButtonStyle(backgroundColor: MaterialStatePropertyAll(Colors.black)),
                  child:const Image(image: AssetImage("image/detail_cell.png"),),
               
              ),//ElevatedButton
            )//Container
          ],//children
        )//Stack
     );//SizedBox
   }

效果如下:

标签:Container,自定义,圈子,按钮,话题,40,child,Flutter
From: https://www.cnblogs.com/huangczh/p/17962226

相关文章

  • 集成 Firebase 后,Flutter IM SDK 在 Android 端不触发回调
    描述客户已集成FirebaseMessaging,Android平台FlutterIMSDK的不触发任何回调。分析(根因分析、需求分析)可能原因是客户构建了一个FlutterEngineinstance,导致SDK的FlutterEngineinstance失效了。解决方案找到以下java文件packages/firebase_messaging/firebase_me......
  • 如何自定义选图功能?
    1,你可以更改功能板上的各个图标按钮和响应,你可以参考RCDChatViewController文件中的注释。2,根据1提到的注释,加上如下代码-(void)pluginBoardView:(RCPluginBoardView*)pluginBoardViewclickedItemWithTag:(NSInteger)tag{switch(tag){casePLUGIN_BOARD_ITEM_ALBUM_TAG:{......
  • 251-AMap.MarkerClusterer聚合点自定义点击会重复触发
    map.plugin(["AMap.MarkerClusterer"],function(){letcluster=null;varcount=pointerList.length;letclickFlag=false;functionrenderClusterMarker(context){console.log("renderClusterMarker..5.")l......
  • springBoot自定义拦截器
    编写FuelH5InterceptorConfig配置类packagecom.fuel.framework.config;importcom.fuel.framework.interceptor.FuelH5Interceptor;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.context.annotation.Configuration;importorg......
  • 27-K8 CRD:如何根据需求自定义你的 API?
    随着使用的深入,你会发现Kubernetes中内置的对象定义,比如Deployment、StatefulSet、Configmap,可能已经不能满足你的需求了。你很希望在Kubernetes定义一些自己的对象,一来可以通过kube-apiserver提供统一的访问入口,二来可以像其他内置对象一样,通过kubectl命令管理这些自定......
  • 【转】C# WinForm 自定义控件,DataGridView背景透明,TabControl背景透明
    原文:https://www.cnblogs.com/leavind/p/6732530.html 1usingSystem.ComponentModel;2usingSystem.Drawing;3usingSystem.Windows.Forms;4namespaceRaywindStudio.Components5{6publicclassTabCtrlX:TabControl7{8publicT......
  • Vue2 使用 Knova Canvas 合成图片、多个视频、音频在一个画面中并播放,自定义 video co
    本文转载https://blog.csdn.net/RosaChampagne/article/details/128020428?spm=1001.2014.3001.5502的文章安装插件npminstallvue-konva@2konva--save在main.js中使用importVuefrom'vue';importVueKonvafrom'vue-konva';Vue.use(VueKonva);相关实现代......
  • Flutter组件GridView使用介绍
    介绍GridView是Flutter中用于创建网格布局的滚动小部件。它可以创建多列布局,并且每个网格单元可以包含一个小部件。GridView提供了几种构造函数来创建不同类型的网格布局:GridView:最通用的构造函数,完全自定义网格布局。GridView.builder:按需构建网格项,适用于具有大量(或无限)网格......
  • flutter中InheritedWidget共享数据
    InheritedWidget是Flutter框架中用于在Widget树中共享数据的机制。它是一个特殊的Widget,可以将其放置在Widget树的上层,并向下传递共享的数据给其子Widget。子Widget可以通过InheritedWidget来获取共享的数据,而不需要通过显式地将数据传递给它们。import'package:flutter/materi......
  • 使用Winform开发自定义用户控件,以及实现相关自定义事件的处理
    在我们一些非标的用户界面中,我们往往需要自定义用户控件界面,从而实现不同的内容展示和处理规则,本篇内容介绍使用Winform开发自定义用户控件,以及实现相关自定义事件的处理。1、用户控件的界面分析对于比较规范的界面,需要进行一定的分析,以便从中找到对应的规则,逐步细化为自定义用......