Android 如何集成D-Pad焦点导航?
我目前正试图在我的Android电视上用Flutter制作一个Netflix风格的用户界面。在过去的几天里,我一直在努力集成焦点导航,我想在这里问一下,因为这里似乎没有任何深入的教程 现在,我希望能够使用d-pad控件导航我的ListView构建器,并向小部件添加一个特殊状态,以表示它当前已被选中或带有边框 以下是我当前的代码:Android 如何集成D-Pad焦点导航?,android,flutter,dart,Android,Flutter,Dart,我目前正试图在我的Android电视上用Flutter制作一个Netflix风格的用户界面。在过去的几天里,我一直在努力集成焦点导航,我想在这里问一下,因为这里似乎没有任何深入的教程 现在,我希望能够使用d-pad控件导航我的ListView构建器,并向小部件添加一个特殊状态,以表示它当前已被选中或带有边框 以下是我当前的代码: class Home extends StatefulWidget { Home({Key key}) : super(key: key); @overrid
class Home extends StatefulWidget {
Home({Key key}) : super(key: key);
@override
HomeState createState() => new HomeState();
}
class HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: 8.0, right: 8.0),
child: FutureBuilder(
// an asset :bundle is just the resources used by a given application
future: DefaultAssetBundle.of(context)
.loadString('assets/json/featured.json'),
builder: (context, snapshot) {
// Loading indicator
if (!snapshot.hasData) {
return CircularProgressIndicator();
}
if (snapshot.hasError) {
return Text(snapshot.error); // or whatever
}
var mediaData = json.decode(snapshot.data.toString());
List<Session> mediaDataSession =
(mediaData as List<dynamic>).cast<Session>();
// Pass our array data into the Session class' fromJson method and allow it to be iterable
var decodedData =
mediaData.map((data) => Session.fromJson(data)).toList();
BoxDecoration myBoxDecoration() {
return BoxDecoration(
border: Border.all(),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 30.0),
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Featured',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'HelveticaNeue',
fontSize: 24.0)),
),
),
Expanded(
// Focus was here before
child: ListView.builder(
itemCount: mediaData.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
return Align(
alignment: Alignment.topLeft,
child: Container(
margin:
EdgeInsets.only(right: 8.0, top: 4.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment
.start, // Workaround for aligning text
children: [
Container(
// Find a way to render based on focus being true
decoration: myBoxDecoration(),
child: InkWell(
// onTap: () => {},
borderRadius: BorderRadius.circular(4.0),
focusColor: Colors.black,
child: SizedBox(
height: 150.0,
child: ClipRRect(
child: Image.network(
mediaData[index]['image'])),
),
),
),
Padding(
padding: const EdgeInsets.only(top: 6.0),
child: Text(mediaData[index]['name'],
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 17.0,
fontFamily: "HelveticaNeue",
fontWeight: FontWeight.normal)),
)
],
),
),
);
},
),
),
],
);
}),
);
}
}
作为参考,我想在这里看到如下视频:
任何帮助都将不胜感激 以下是视频中应用程序的源代码:
太棒了,谢谢!我还发现了这篇很棒的文章: