当前位置：首页 > article >正文

Flutter：父组件，向子组件传值，子组件向二级页面传值

article 2024/11/18 14:37:04

父页面，传值给子组件，子组件把数据传递给二级页面

父页面

final List _datas; // 通过接口请求到的数据

...
...

// 父页面中的子组件：SearchCell
body: Container(
	child：SearchCell(datas: _datas,);
)

子组件：SearchCell

class SearchCell extends StatelessWidget {
  final List? datas;
  const SearchCell({this.datas});
}

// 触发某次点击事件，把datas传递过去
onTap: (){
  Navigator.of(context).push(
  	// 把数据传递给搜索页
    MaterialPageRoute(builder: (BuildContext context)=> SearchPage(datas: datas,))
  );
},

搜索页

class SearchPage extends StatefulWidget {
  final List? datas;
  const SearchPage({this.datas});
  @override
  State<SearchPage> createState() => SearchPageState();
}
class SearchPageState extends State<SearchPage> {
	final List _modals = [];
	
	// 根据搜索的内容去检索上个页面传来的datas
	void _searchData(String text) {
		// 每次搜索先清空
		_modals.clear();
		if(text.length>0){
			for(int i = 0; i < widget.datas.length; i ++){
				String name = widget.datas[i].name;
				// contains 是否包含
				if(name.contains(text)){
					_modals.add(widget.datas[i]);
				}
			}
		}
	}
	....
	....
	children: [
		// onChanged 的回调
		SearchBar(onChanged: (String texts){
			_searchData(text);
		},),
	]
}

// 搜索页内的小部件，头部的搜索框,
class SearchBar extends StatefulWidget {
  // 定义onChanged的回调方法
  final ValueChanged<String>? onChanged;
  const SearchBar({this.onChanged});
  @override
  State<SearchBar> createState() => SearchBarState();
}
class SearchBarState extends State<SearchBar> {
  // 文字编辑控制器，监听搜索框的变化。
  final TextEditingController _controller = TextEditingController();
  // 监听输入框的变化
  void _onChangeVal(String value){
    if(widget.onChanged != null){
      widget.onChanged!(value);
    }
  }
  
  ...
  ...
  // 这里有个输入框
  TextField(
	controller: _controller, // 文字编辑控制器,配合_onChange方法使用
	onChanged: _onChangeVal, // 监听输入框的变化
	autofocus: true, // 是否自动聚焦光标
	cursorColor: Colors.green, // 默认边框的颜色
	decoration: const InputDecoration( // 装饰器
		contentPadding: EdgeInsets.only(left: 10, bottom: 10), // 内容偏移
		border: InputBorder.none, // 隐藏默认边框
		hintText: '搜索', // 默认提示问题
	),
	style: const TextStyle(fontSize: 18, fontWeight: FontWeight.w300, color: Colors.black), // 文字颜色
)
}