search_page.dart 4.45 KB
import 'package:flutter/material.dart';
import 'package:Parlando/tiktok/style/style.dart';
import 'package:tapped/tapped.dart';

import 'package:Parlando/extension/int_extension.dart';

class SearchPage extends StatefulWidget {
  final Function? onPop;

  const SearchPage({
    Key? key,
    this.onPop,
  }) : super(key: key);
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    Widget head = Container(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      color: ColorPlate.back2,
      width: double.infinity,
      alignment: Alignment.center,
      child: Container(
        padding: EdgeInsets.symmetric(
          horizontal: 16.px,
          vertical: 12.px,
        ),
        child: Row(
          children: <Widget>[
            Icon(
              Icons.fullscreen,
              size: 24.px,
              color: Colors.white,
            ),
            Expanded(
              child: Container(
                height: 32.px,
                margin: EdgeInsets.only(right: 20.px, left: 12.px),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(4.px),
                ),
                padding: EdgeInsets.only(left: 12.px),
                child: Opacity(
                  opacity: 0.3,
                  child: Row(
                    children: <Widget>[
                      Icon(
                        Icons.search,
                        size: 20.px,
                      ),
                      Container(
                        padding: EdgeInsets.only(
                          left: 2.px,
                          bottom: 2.px,
                        ),
                        child: const Text(
                          '搜索内容',
                          style: StandardTextStyle.normal,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
            Tapped(
              child: Text(
                '取消',
                style: StandardTextStyle.normal.apply(color: ColorPlate.orange),
              ),
              onTap: widget.onPop,
            ),
          ],
        ),
      ),
    );
    Widget body = ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        const _SearchSelectRow(),
        const _SearchSelectRow(),
        Opacity(
          opacity: 0.6,
          child: SizedBox(
            height: 46.px,
            child: const Center(child: Text('全部搜索记录')),
          ),
        ),
        Container(
          margin: EdgeInsets.symmetric(horizontal: 12.px, vertical: 16.px),
          child: AspectRatio(
            aspectRatio: 4.px,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(8.px),
              ),
              alignment: Alignment.center,
              child: Text(
                '预留轮播图',
                style: TextStyle(
                  color: Colors.black45,
                  fontSize: 18.px,
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
          ),
        ),
      ],
    );
    return Scaffold(
      body: Container(
        color: Colors.white,
        height: double.infinity,
        width: double.infinity,
        child: Column(
          children: <Widget>[
            head,
            Expanded(child: body),
          ],
        ),
      ),
    );
  }
}

class _SearchSelectRow extends StatelessWidget {
  const _SearchSelectRow({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.px, vertical: 10.px),
      child: Row(
        children: <Widget>[
          Icon(
            Icons.timelapse,
            size: 20.px,
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.only(left: 8.px, bottom: 1.px),
              child: const Text(
                '搜索唐诗宋词元曲3000首',
                style: StandardTextStyle.normal,
              ),
            ),
          ),
          Icon(
            Icons.clear,
            size: 20.px,
          ),
        ],
      ),
    );
  }
}