在 Flutter 文本字段中输入

Question

嘿，我正在尝试创建我的第一个 flutter 应用程序，其中我有一个包含导航栏的主屏幕，该导航栏将根据选择的 NavBarItem 在脚手架主体上渲染页面。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:ionicons/ionicons.dart';
import 'package:flutter/material.dart';
import 'package:login/screens/AnimeNews.dart';
import 'package:login/screens/Animelist.dart';
import 'package:login/screens/mylist.dart';


class HomePage extends StatefulWidget {

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late int currentselectedindex;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentselectedindex =1;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        backgroundColor: Colors.grey[300],
      ),
      appBar: AppBar(
        elevation: 0.0,
        backgroundColor: Colors.deepPurple,
        title: const Text('AnimeWiki'),
      ),
      backgroundColor: Colors.grey[400],
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (index){
          setState(() {
            currentselectedindex=index;
          });
        },
        selectedIndex: currentselectedindex,
        animationDuration: const Duration(
          seconds: 1,
          milliseconds: 300
        ),
        destinations: const [
          NavigationDestination(icon: Icon(Ionicons.newspaper), label: 'AnimeNews'),
          NavigationDestination(icon: Icon(Ionicons.home), label: 'AnimeList'),
          NavigationDestination(icon: Icon(Ionicons.list_circle), label: 'MyList')
        ],
      ),
      body:[MList(),AList(),News()][currentselectedindex]

    );
  }
}
 

到目前为止一切正常，但在 Alist 小部件中我无法在 TextField 小部件上键入

import 'package:flutter/material.dart';
import 'package:ionicons/ionicons.dart';
class AList extends StatefulWidget {
  const AList({super.key});

  @override
  State<AList> createState() => _AListState();
}

class _AListState extends State<AList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body:Column(
        children: [
          Container(
            color: Colors.deepPurple,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: Container(
                  decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.white
                    ),
                    color: Colors.grey.shade200
                  ),
                  child: const TextField(
                            decoration: InputDecoration(
                              hintText: 'Enter anime name',
                              icon: Icon(Ionicons.search),
                              border: InputBorder.none,

                            ),

                  ),
                ),
              ),
            ),
          ),
        ListView(
          children: const [
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Trending'),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text("Just Added"),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Top 10 Airing'),
            ),
            Placeholder(),
            Padding(
              padding: EdgeInsets.all(2.0),
              child: Text('Top 10 Upcoming'),
            ),
            Placeholder(),
          ],
        )
        ],
      )

    );
  }
}

尝试删除一些容器和 ClipRRect，但没有任何效果。

Answer 1

您应该将

TextField

移动到

children

小部件的

ListView

，并删除

Column

小部件及其子部件。

如果您想将搜索保留在顶部，请使用

appbar

中的

Scaffold

而不是

Column

。