在 Flutter 中制作搜索栏

Question

我制作了一个看起来像这样的搜索栏

这是完整的代码，

import 'package:flutter/material.dart';

    class SearchInput extends StatefulWidget {
      @override
      State<SearchInput> createState() => _SearchInputState();
    }
    
    class _SearchInputState extends State<SearchInput> {
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.only(top: 25, left: 25, right: 25),
          child: Column(
            children: [
              Row(
                children: [
                  Flexible(
                    flex: 1,
                    child: TextField(
                      cursorColor: Colors.grey,
                      decoration: InputDecoration(
                        fillColor: Colors.white,
                        filled: true,
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(10),
                          borderSide: BorderSide.none
                        ),
                        hintText: 'Search',
                        hintStyle: TextStyle(
                          color: Colors.grey,
                          fontSize: 18
                        ),
                        prefixIcon: Container(
                          padding: EdgeInsets.all(15),
                          child: Image.asset('assets/icons/search.png'),
                          width: 18,
                        )
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only (left: 10),
                    padding: EdgeInsets.all(15),
                    decoration: BoxDecoration(
                      color: Theme.of(context).primaryColor,
                      borderRadius: BorderRadius.circular(15)
                    ),
                    child: Image.asset(
                    'assets/icons/filter.png'),
                    width: 25
                  ),
                ],
              )
            ],
          ),
        );
      }
    }

我不知道如何具体解释它，当我按下搜索框时，我可以以某种方式对其进行编码吗？例如这个？

或者还有其他方法可以实现这一点吗？如果可能的话，请逐步解释如何做到这一点。

Answer 1

尝试使用 readOnly: true 并覆盖 onTap 方法进入下一个搜索屏幕

TextField(
   readOnly: true,  
   onTap: () {
      //Go to the next screen
   },
   cursorColor: Colors.grey,
)