#2 電子書 App

這次作業是簡單介紹象棋中不同階段的不同戰術，開局中局殘局都各介紹了兩種戰術。

影片

https://youtu.be/iOa5x3gVvjU?si=piam66u5_ZY6RlYL

github 連結

GitHub - qwer312132/chinesechess_tatic

app截圖

核心程式碼

總共分成三個class，Detail是描述棋局的細節，Tatic是介紹不同戰術，TaticType則是介紹戰術類型

class Detail extends StatelessWidget {
  final String? detailText;
  final String? imagePath;
  const Detail(String this.detailText, String this.imagePath, {super.key});
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Image.asset(imagePath!, height: 500, width: 300),
        Text(detailText!, style: const TextStyle(fontSize: 20)),
      ],
    );
  }
}

class Tatic extends StatelessWidget
{
  final String? name;
  const Tatic(String this.name, {super.key});
  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      appBar: AppBar(
        title: Text(name!),
        backgroundColor: Colors.blue[100],
      ),
      body:
      SingleChildScrollView(child: 
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(introArray[taticsArray.indexOf(name!)],style: TextStyle(fontSize: 20)),
            // Expanded(
              ListView.builder(
                physics:NeverScrollableScrollPhysics(),
                // physics:NeverScrollablePhysics(),
                shrinkWrap:true,
                padding: const EdgeInsets.all(8),
                itemCount: tatic[taticsArray.indexOf(name!)].length,
                itemBuilder: (BuildContext context, int index) {
                  return tatic[taticsArray.indexOf(name!)][index];
                }
              )
            // )
          ],
        )
      )
    );
  }
}

class TaticType extends StatelessWidget
{
  String? name;
  var tatics = <String>{};
  TaticType(String this.name, var this.tatics, {super.key});
  @override
  Widget build(BuildContext context)
  {
    return GridView.count(
      padding: const EdgeInsets.all(8),
      crossAxisCount: 2,
      children: [for (var tatic in tatics) 
        GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => Tatic(tatic)),
            );
          },
          child: Card(
            child: Center(
              child:Text(tatic, style: const TextStyle(fontSize: 20)),
            )
          )
        )
      ]
    );
  }
}